我使用ng-class有什麼問題？

Question

我正在使用ui-router，下面的視圖使用'Controller As'語法訪問控制器。我將「無效」類加入'班'收音機容器中。當表單加載時，您可以看到驗證需要消息（對於請求日期和轉變）。當請求日期和轉變設置驗證消息消失。 Form's $valid是真的。唯一的問題是'無效'類無線電包裝 div保留。

我在做什麼錯？

<form novalidate ng-submit="_form.$valid && formCtrl.getFormData()" name="_form"> 
    <div class="datepicker-wrapper clearfix"> 
     <datepicker date-format="yyyy-MM-dd"> 
      <input required ng-model="formCtrl.requestDate" name="requestDate" type="text" /> 
     </datepicker>      
    </div> 
    <div ng-messages="_form.requestDate.$error" role="alert"> 
     <div ng-message="required">Введите дату</div> 
    </div> 
    <div class="radio-wrapper clearfix" ng-class="{invalid: _form.shift.$error}"> 
     <div ng-repeat="shift in formCtrl.shifts" class="item half-width pull-left"> 
      <label for="<% shift.name %>"> 
       <input required ng-model="formCtrl.currentShift" 
         name="shift" 
         ng-value="shift" 
         id="<% shift.name %>" 
         type="radio" /> 
       <span class="text"><span ng-bind="shift.text"></span></span> 
      </label> 
     </div> 
    </div> 
    <div ng-messages="_form.shift.$error" role="alert"> 
     <div ng-message="required">Укажите смену</div> 
    </div> 
    <!-- other inputs... --> 
</form> 

Answer 1

我認爲你需要使用的，而不是$error屬性，它是一個哈希$invalid屬性，它是一個布爾值。

請參見：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Answer 2

沒有_form.shift。輸入shift在ng-repeat內聲明，因此它是_form上的一個屬性。

要解決，你可以舉例來說，移動你的ng-class的NG-重複內使用ng-form創建一個子分組引用轉變：

<div ng-repeat="shift in formCtrl.shifts" ng-form='nestedShiftForm'> 
    <div ng-class="{invalid: nestedShiftForm.shift.$error}"> 
     <input name="shift" /> 

Answer 3

你ng-class定義檢查形式的錯誤性質控制器。您正在檢查_form.shift.$error的真實性。即使沒有驗證錯誤，該對象也會一直存在。當你沒有任何錯誤時，_form.shift.$error的值是空的對象{}這是真的。

您應該檢查_form.shift.$invalid屬性，該屬性將正確更新該表單字段是否有任何問題。