3

Ich habe Custom input component with validation mit ngMessages, FormController und ng-required:

<div class="col-sm-9 col-xs-12"> 
    <input 
     id="{{$ctrl.fieldName}}" 
     name="{{$ctrl.fieldName}}" 
     class="form-control" 
     type="text" 
     minlength="{{$ctrl.minLength}}" 
     maxlength="{{$ctrl.maxLength}}" 
     ng-required="{{$ctrl.isRequired === 'true'}}" 
     ng-model="$ctrl.value" 
     ng-change="$ctrl.form.$submitted = false;" 
    > 
    <div 
     ng-messages="$ctrl.form[$ctrl.fieldName].$error" 
     ng-if="$ctrl.form.$submitted" 
    > 
     <span class="help-block" ng-message="required"> 
     Field is required 
     </span> 
     <span class="help-block" ng-message="minlength"> 
     Minimum length of field: {{$ctrl.minLength}} 
     </span> 
     <span class="help-block" ng-message="maxlength"> 
     Maximum length of field: {{$ctrl.maxLength}} 
     </span> 
    </div> 
    </div> 

die auf diese Weise verwendet wird:

<act-text-field 
    form="heroAddForm" 
    field-name="name" 
    min-length="3" 
    max-length="15" 
    is-required="true" 
    errors="$ctrl.errors.name" 
    ng-model="$ctrl.hero.name"> 
</act-text-field> 

Was ich erreichen möchte, ist Validierung ausgelöst, wenn Benutzer auf submit Schaltfläche klickt. Und es funktioniert, Validierung Brände auch für Pflichtfeld name, sondern auch für das Feld description der erforderlich ist, nicht:

<act-text-field 
    form="heroAddForm" 
    field-name="description" 
    max-length="50" 
    is-required="false" 
    errors="$ctrl.errors.description" 
    ng-model="$ctrl.hero.description" 
></act-text-field> 

Auch für dieses Feld Validierungsmeldungen angezeigt werden, obwohl Feld description gültig ist, weil ich Klasse hinzufügen has-error zu ungültige Felder:

<div class="form-group" 
    ng-class="{'has-error': $ctrl.form.$submitted && (!$ctrl.form[$ctrl.fieldName].$valid)}" 
> 
<!-- rest of code --> 

Sie können dieses falsche Verhalten leicht reproduziert in meinem Plunker: Custom input demo app with validation states (ich weiß es andere Fehler hat). Ich denke, ng-message="required" sollte nicht sichtbar sein, weil Feld description nicht erforderlich ist. Ich weiß, dass ich etwas ng-if s hinzufügen kann, um es zu überbrücken, aber ich denke, dass ich irgendwo einen Fehler mache, den ich nicht sehen kann. Siehst du, wo ich einen Fehler gemacht habe? Vielen Dank im Voraus für jede Hilfe.

Antwort