Zurücksetzen AngularJS Form

Question

ich eine Form wie dieses haben,

<form name="stakeholderForm"> 
     <div class="form-group evy_aboutme_cl05"> 
      <div class="form-group evy_form_edit" show-errors> 
       <label for="InputFname">First Name</label> 
       <input type="text" name="fname" class="form-control" id="InputFname" placeholder="" ng-model="vm.stakeHolder.first_name" ng-blur="vm.saveStakeholder();" required> 
       <div ng-if="stakeholderForm.fname.$error.required" ng-messages="stakeholderForm.fname.$error" ng-include="'app/shared/messages.html'"></div> 
       <!-- <div ng-if="vm.firstname" class="evy_user-preference_error">First name is required</div> --> 
      </div> 
      <div class="form-group evy_form_edit" show-errors> 
       <label for="InputLname">Last Name</label> 
       <input type="text" name="lname" class="form-control" id="InputLname" placeholder="" ng-model="vm.stakeHolder.last_name" ng-blur="vm.saveStakeholder();" required> 
       <div ng-if="stakeholderForm.lname.$error.required" ng-messages="stakeholderForm.lname.$error" ng-include="'app/shared/messages.html'"></div> 
       <!-- <div ng-if="vm.lastname" class="evy_user-preference_error">Last name is required</div> --> 
      </div> 
     </div> 
     <div class="form-group evy_insights_tag_cmpny" show-errors> 
      <label>Company</label> 
      <evy-typeahead c-type="company" prompt="Type min 3 charaters for a Company" title="company" subtitle="company_id" model="vm.stakeHolder.company" model-id="vm.company_id" on-blur="vm.saveStakeholder();" required="true"></evy-typeahead> 
      <!-- <div ng-if="vm.companyname" class="evy_user-preference_error">Company name is required</div> --> 
      <div ng-if="stakeholderForm.name.$error.required" ng-messages="stakeholderForm.name.$error" ng-include="'app/shared/messages.html'"></div> 
     </div> 
    </form> 

Und ich versuche dieses Formular zurücksetzen

 vm.addNewStakeHolder = function(id){ 

      vm.stakeHolder = {} 
     } 

Validierungen Aber immer noch verstecken out.I Fehler there.It ist nicht auf Aufruf versuchte 'setPristine' und 'setValidity'.Aber nicht funktioniert.Alle Hilfe?

Answer 1

Ich bin mir nicht ganz sicher, was Sie tun wollen, aber ich nehme an den üblichen Benutzer freundliches Formularvalidierungsverhalten, bei dem Validierungsfehler angezeigt werden, nachdem der Benutzer interagiert hat (nicht sofort, da es sich irgendwie in Ihrem Gesicht befindet).

Ich fügte ein Arbeitsschnipsel (eckige v1.4.x) hinzu, das auch das ngMessages Modul verwendet.

angular.module('TestApp', ['ngMessages']) 
 
.controller('TestFormController', function($scope) { 
 
    var vm = this; 
 
    
 
    vm.data = { 
 
    first: 'hmm' 
 
    }; 
 
    
 
    vm.reset = function() { 
 
    // Reset data to empty object 
 
    vm.data = {}; 
 
    
 
    // Iterate over controls and set pristine 
 
    for(var key in $scope.form) { 
 
     if($scope.form.hasOwnProperty(key) && !key.startsWith('$')) { 
 
     $scope.form[key].$setPristine(); 
 
     } 
 
    } 
 
    }; 
 
    
 
    vm.save = function() { 
 
    // TODO: maybe http call? 
 
    if($scope.form.$valid) { 
 
     console.log('Saved'); 
 
    } else { 
 
     console.log('Form invalid: Cannot save'); 
 
    } 
 
    }; 
 
});

.help-block { 
 
    display:none; 
 
} 
 
    
 
.has-error .help-block { 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular-messages.min.js"></script> 
 

 
<div ng-app="TestApp"> 
 
    <form name="form" novalidate ng-controller="TestFormController as test"> 
 
    <div ng-class="{'has-error': form.first.$dirty && form.first.$invalid}"> 
 
     <label>First Name</label> 
 
     <input type="text" name="first" ng-model="test.data.first" ng-blur="test.save();" required> 
 
     <div ng-messages="form.first.$error"> 
 
     <div class="help-block" ng-message="required">Required :(</div> 
 
     </div> 
 
    </div> 
 
    <button ng-click="test.reset()">Reset</button> 
 
    </form> 
 
</div>

Ich würde raten, nicht das showErrors Modul zu verwenden, da in neueren Winkel Versionen können diese Funktionen einfach über ngModelOptions umgesetzt werden.

Wenn Sie Formularüberprüfungsvorlagen wiederverwenden möchten, sehen Sie sich bitte die Richtlinie ngMessagesInclude an.

Answer 2

Gemäß AngularJs docs for form.FormController Sie können die Formularüberprüfung zurücksetzen, indem Sie einen ursprünglichen Zustand erzwingen. Überprüfen Sie das folgende Beispiel:

vm.addNewStakeHolder = function(id){ 

    vm.stakeHolder = {}; 
    vm.stakeholderForm.$setPristine(); 
    vm.stakeholderForm.$setUntouched(); 
} 

Außerdem können Sie Nachrichten nur angezeigt werden, wenn das Feld verschmutzt ist:

<div 
    ng-if="stakeholderForm.fname.$dirty && stakeholderForm.fname.$invalid." 
    ng-messages="stakeholderForm.fname.$error" 
    ng-include="'app/shared/messages.html'"> 

</div>