Was ist falsch mit meiner Verwendung von ng-Klasse?

Question

Ich verwende UI-Router und die folgende Ansicht greift auf den Controller mit der 'Controller As' Syntax. Ich füge die 'ungültige' Klasse dem 'shift'-radios Behälter hinzu. Beim Laden von Formularen können Sie beide Validierungen Nachrichten (für requestDate und shift) sehen. Wenn requestDate und shift sind, werden Validierungsnachrichten verschwinden. Forms $valid ist wahr. Das einzige Problem ist, dass die "ungültige" Klasse auf dem Radio-Wrapper div bleibt.

Was mache ich falsch?

<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

Ich glaube, Sie die $invalid Eigenschaft verwenden müssen, die ein boolean ist, anstelle der $error Eigenschaft, die ein Hash ist.

Siehe: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Answer 2

Es gibt keine _form.shift ist. Die Eingabe shift ist innerhalb einer ng-Wiederholung deklariert, so dass es eine Eigenschaft auf der _form ist.

beheben Sie könnten zum Beispiel, Ihre ng-class in der ng-repeat bewegen und die Verschiebung Referenz ng-form mit einer Untergruppierung zu erstellen:

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

Answer 3

Ihre ng-class Definition prüft die falsche Eigenschaft des Formulars Regler. Sie überprüfen die Truthigkeit von _form.shift.$error. Dieses Objekt wird immer existieren, auch wenn keine Validierungsfehler vorliegen. Wenn Sie keine Fehler haben, ist der Wert _form.shift.$error das leere Objekt {}, was truthy ist.

Sie sollten stattdessen die _form.shift.$invalid Eigenschaft überprüfen, die ordnungsgemäß aktualisiert, ob Probleme mit diesem Formularfeld vorliegen.