Angular ng-repeat错误显示

我在窗体标签里面有下面的代码，我想在复选框下面出现一些错误文本，但是现在我无法使它与我目前的设置一起工作。我在这里做错了什么？Angular ng-repeat错误显示

售票/ competition_checkboxes.html

<div ng-repeat="compCbx in competitionCheckboxes track by $index"> 
    <input ng-attr-id="cc_comp_{{ $index }}" ng-model="compCbx.isChecked" name="cc_comp" ng-attr-label="cc_comp_label_{{ $index }}" 
      type="checkbox" ng-required="compCbx.checkRequired" ng-checked="compCbx.isChecked" form-blur /> 
    <label ng-attr-id="cc_comp_label_{{ $index }}" ng-attr-for="cc_comp_{{ $index }}" class="fake-label"> 
     <i ng-attr-id="cc_comp_cbx_{{ $index }}"></i> <p ng-bind-html="compCbx.text | to_trusted"></p> 
     <span class="error-msg error-tnc" ng-show="{{formName}}.cc_comp.$touched && {{formName}}.cc_comp.$error.required"> 
      You must agree to enter the competition 
     </span> 
    </label> 
</div>

页面上的电流输出为

正如你所看到的条款和条件复选框正确验证，但是那是因为它不在ng-repeat

项

的条款和条件有这个代码

<input id="cc_tnc" ng-model="cc_tnc" label="cc_tnc_label" name="cc_tnc" type="checkbox" ng-required="cc_tnc != true" form-blur> 
     <label id="cc_tnc_label" for="cc_tnc" class="fake-label"> 
      <i id="cc_tnc_cbx"></i> <p>I have read and agree to <a href="@Model.TermsUrl" target="_blank">terms and conditions</a></p> 
      <span class="error-msg error-tnc" ng-show="{{ formName }}.cc_tnc.$touched && {{ formName }}.cc_tnc.$error.required"> 
        You must agree to the Terms and Conditions to make a purchase 
      </span> 
     </label> 
<ng-include src="'ticketing/competition_checkboxes.html'"></ng-include>

形式模糊指令

directive('formBlur', function(setErrorState) { 

     //set element on dirty 
     return { 
      restrict: 'A,E', 
      require: ['^form'], 
      link: function(scope, element, attrs, ctrl) { 

       var form = scope[ctrl[0].$name]; 

       element.bind('blur', function() { 

        scope.$apply(function() { 

         console.log("Error in blur"); 
         form[attrs.name].$touched = true; 
         setErrorState(element, form[attrs.name].$valid); 

        }); 
       }); 

       scope.$watch(form.$name + '.' + attrs.name + '.$valid', function(validity) { 

        console.log("In watch"); 
        console.dir(form[attrs.name]); 
        if (form[attrs.name].$touched) 
         setErrorState(element, validity); 

       }); 
      } 
     }; 
    })

来源

2017-02-12 Matthew Pigram

“假标签”css类的内容是什么？目前的产出是多少;请提供您的浏览器提供的HTML。 – osmanraifgunes

@osmanraifgunes假标签类只包含一些格式的边距等，它不影响显示。我已经根据请求添加了更多细节 –

@osmanraifgunes更新了新的细节 –

变化ng-required="compCbx.checkRequired"到required="compCbx.checkRequired"

Jsfiddle working sample

我不知道为什么它的工作; ）

来源

2017-02-16 17:06:24 osmanraifgunes

它似乎没有在小提琴中工作？如果我将checkRequired设置为false，它仍然期望复选框被检查......我相信实际问题是由尝试使用'ng-show =“{{formName}}进行验证所致。cc_comp。$ touched && {{formName }}。cc_comp。$ error.required“'因为输入中的名称字段不允许具有可配置的名称。使用角度子窗体似乎更接近解决方案，但它仍然不正确.... –

Angular ng-repeat错误显示

回答

相关问题