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錯誤顯示

回答

相關問題