AngularJS Formularvalidierungen: HAS-Fehler wird nicht für ng-erforderliche Felder angezeigt

Question

Wenn ein Benutzer einen Teil seiner Adresse bearbeitet, sollte jedes Feld den roten ungültigen Rahmen um es herum aufweisen, der angibt, dass das vollständige Formular erforderlich ist. Ich kann das Feld "Adresse" nicht anzeigen, um den ungültigen roten Rahmen anzuzeigen.

set-dirty-if='user.objectId' setzt jedes Feld zu schmutzig. Ich habe wahrscheinlich Zugangslogik, aber die Idee ist, den Benutzer zu zwingen, jedes Adressenfeld auszufüllen und Kennzeichen dafür zu haben.

Was fehlt mir, um den ungültigen Fehler "Adresse" anzuzeigen?

(beachten Sie, dass das Feld „Adresse“ bevölkern wird sich Stadt, Staat Grenze rot mit Reißverschluss, die gewünscht wird)

<form class="form" name='form' class="edit-form-wrapper" novalidate> 
    <fieldset class="form-group" ng-class="{'has-error': form.address.$dirty && !form.address.$valid, 'has-feedback': form.address.$dirty && !form.address.$valid}"> 
     <label class="control-label" for="address">Address</label> 
     <input type="text" class="form-control" name="address" ng-model="user.address" set-dirty-if="user.objectId" ng-required="user.city || user.state || user.zip"> 
     <span ng-show="form.address.$dirty && !form.address.$valid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
    </fieldset> 


    <fieldset class="form-group" ng-class="{'has-error': form.city.$dirty && !form.city.$valid, 'has-feedback': form.city.$dirty && !form.city.$valid}"> 
     <label class='control-label' for="city">City</label> 
     <input type="text" class="form-control" name="city" ng-model="user.city" set-dirty-if='user.objectId' ng-required='user.address || user.state || user.zip'> 
     <span ng-show='form.city.$dirty && !form.city.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
    </fieldset> 


    <fieldset class="form-group" ng-class="{'has-error': form.state.$dirty && !form.state.$valid, 'has-feedback': form.state.$dirty && !form.state.$valid}"> 
     <label class='control-label' for="state">State</label> 
     <input type="text" class="form-control" name="state" ng-model="user.state" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.zip'> 
     <span ng-show='form.state.$dirty && !form.state.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
    </fieldset> 



    <fieldset class="form-group" ng-class="{'has-error': form.zip.$dirty && !form.zip.$valid, 'has-feedback': form.zip.$dirty && !form.zip.$valid}"> 
     <label class='control-label' for="zip">Zip Code</label> 
     <input type="text" class="form-control" name="zip" ng-model="user.zip" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.state'> 
     <span ng-show='form.zip.$dirty && !form.zip.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
    </fieldset> 
    </form> 

Answer 1

ändern ng-required Wert von Adressfeld user.city || user.state || user.zip-(user.city || user.state || user.zip) ? true : false) dh:

<input type="text" class="form-control" name="address" ng-model="user.address" 
    ng-required="(user.city || user.state || user.zip) ? true : false"> 

sehen Sie ein funktionierendes Beispiel unter

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div ng-app class="container"> 
 
    <form class="form" name='form' class="edit-form-wrapper"> 
 
    <fieldset class="form-group" ng-class="{'has-error': form.address.$dirty && !form.address.$valid, 'has-feedback': form.address.$dirty && !form.address.$valid}"> 
 
     <label class="control-label" for="address">Address</label> 
 
     <input type="text" class="form-control" name="address" ng-model="user.address" ng-required="(user.city || user.state || user.zip) ? true : false"> 
 
     <span ng-show="form.address.$dirty && !form.address.$valid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
 
    </fieldset> 
 

 

 
    <fieldset class="form-group" ng-class="{'has-error': form.city.$dirty && !form.city.$valid, 'has-feedback': form.city.$dirty && !form.city.$valid}"> 
 
     <label class='control-label' for="city">City</label> 
 
     <input type="text" class="form-control" name="city" ng-model="user.city" set-dirty-if='user.objectId' ng-required='user.address || user.state || user.zip'> 
 
     <span ng-show='form.city.$dirty && !form.city.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
 
    </fieldset> 
 

 

 
    <fieldset class="form-group" ng-class="{'has-error': form.state.$dirty && !form.state.$valid, 'has-feedback': form.state.$dirty && !form.state.$valid}"> 
 
     <label class='control-label' for="state">State</label> 
 
     <input type="text" class="form-control" name="state" ng-model="user.state" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.zip'> 
 
     <span ng-show='form.state.$dirty && !form.state.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
 
    </fieldset> 
 

 

 

 
    <fieldset class="form-group" ng-class="{'has-error': form.zip.$dirty && !form.zip.$valid, 'has-feedback': form.zip.$dirty && !form.zip.$valid}"> 
 
     <label class='control-label' for="zip">Zip Code</label> 
 
     <input type="text" class="form-control" name="zip" ng-model="user.zip" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.state'> 
 
     <span ng-show='form.zip.$dirty && !form.zip.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
 
    </fieldset> 
 
    </form> 
 
</div>