AngularJS: auf klicken, wenn pristine ODER wenn schmutzig und gültig

Question

Ich habe ein Eingabefeld:

<input name="fName" type="text" class="form-control dude.firstName" 
    ng-trim="false" 
    ng-pattern="patterns.name" 
    ng-model="dude.firstName" 
    ng-model-options="{ updateOn: 'blur' }" 
    required> 
<span class="error" ng-show="idForm.fName.$error.pattern"> 
    Please only use letters, forward slashes, and hyphens 
</span> 

Meine Anforderungen sind dies:

1. Wenn der Benutzer nichts geändert hat, muss es laufen saveIdentification
2. Wenn der Benutzer etwas hat sich geändert und es ist nicht gültig, dann stoppen und damit die Form der Nachricht

3. anzuzeigen Wenn der Benutzer sich etwas geändert hat und es gilt, dann laufen saveIdentification

   <span 
       ng-show="localEditing.id=='SAVE'" 
       tabindex="0" 
       title="Save Changes" 
       class="globalIcon-save action-edit-button" 
       ng-click="(idForm.$pristine || (idForm.$dirty && idForm.$valid)) && saveIdentification()"> 
   </span> 
   

Die Lösung oben erfüllt Anforderungen 1 und 2, aber nicht 3. Es wird nicht speichern, wenn die Form und gültig geändert wird.

Answer 1

Bitte unten Schnipsel sehen. Ich habe nur eine kleine Änderung an Ihrem Code vorgenommen, um das Formularobjekt als Parameter in der saveIdentification-Funktion zu erhalten.

Hinweis, dass ich einen Eingang mit ng-maxlength="3", um das Szenario zu reproduzieren hinzugefügt, in dem die Form ungültig ist (wenn der Eingabetext größer als 3)

Wenn die von Ihnen beschriebenen Bedingungen eines "erfüllt sind ran saveIdentification! "Text wird in der Browser-Konsole (Devtools) protokolliert.

angular 
 
    .module('app', []) 
 
    .controller('myCtrl', function() { 
 

 
    var vm = this; 
 

 
    vm.wizard = { 
 
     saveIdentification: fnSaveIdentification 
 
    }; 
 

 
    return vm.wizard; 
 

 
    function fnSaveIdentification(form) {debugger; 
 
     if (form && (form.$pristine || form.$valid)) { //<-- Condition here! 
 
     console.log('ran saveIdentification!'); 
 
     } 
 
    } 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="myCtrl as ctrl"> 
 

 
    <form name="myForm"> 
 
    <input name="i1" type="text" ng-maxlength="3" ng-model="ctrl.input"> 
 
    <a href="#" ng-click="ctrl.saveIdentification(myForm)">Submit</a> 
 

 
    <!-- Display message here!! (modify as you need it)--> 
 
    <span ng-show="myForm.$invalid">Form is invalid</span> 
 
    </form> 
 

 
</div>

Answer 2

versuchen Sie dies:

ng-disabled="(idForm.$dirty && idForm.$invalid))" 
ng-click="saveIdentification()" 
> 

<span ng-show="(idForm.$dirty && idForm.$invalid))"> 
Your error message goes here!!! 
</span>