Wie setze ich ein Formular in AngularJS post submit nur von HTML zurück?

Question

Ich habe eine form. Sende submit, wenn die form ist ungültig, Requisiten der Fehler aus unter den input Felder aus.

Man kann die form verstecken Abbrechen-Taste.

Das Formular kann wieder angezeigt werden, mit 'Show Form' button.

Aber die Frage: Die alten formFehler immer noch besteht.

Wie kann man das Formular ohne zurücksetzen, das mit dem ng-model verknüpft ist, da die Eingabefelder beim Laden leer sein sollten?

Der Reset, sollte ich in der Lage sein, es zu tun, von html selbst und nicht vom controller.

-Code unten:

<form novalidate name="form.customForm"> 
     <div class="form-group"> 
     <div> 
      <label>Name</label> 
     </div> 
     <div> 
      <input type="text" name="name" ng-model="model.name" class="form-control" ng-required="true" /> 
      <span class="red" ng-show="(form.customForm.name.$touched && form.customForm.name.$error.required) || (form.customForm.name.$error.required &&  form.customForm.$submitted)">Name cannot be empty</span> 
     </div> 
     </div> 

     <div class="form-group"> 
     <div> 
      <label>Age</label> 
     </div> 
     <div> 
      <input type="text" name="age" ng-model="model.age" class="form-control" ng-required="true" /> 
      <span class="red" ng-show="(form.customForm.age.$touched && form.customForm.age.$error.required) || (form.customForm.age.$error.required &&  form.customForm.$submitted)">Age cannot be empty</span> 
     </div> 
     </div> 

     <button class="btn btn-primary" type="submit" ng-click="submit(form.customForm.$valid);"> 
     Submit 
     </button> 
     <button class="btn btn-default" type="button" ng-click="isForm = false;"> 
     Cancel 
     </button> 

</form>  

Siehe die demo.

Answer 1

würde ich vorschlagen, Sie schreiben die Schaltfläche Logik in der Steuerung abzubrechen, sind Sie sicher, dass Sie es von der html selbst tun wollen ?, Sie Mit diesen Anweisungen können Sie das Formular und die Felder zurücksetzen.

form.customForm.$setPristine(); 
model = {}; 
form.customForm.$setUntouched(); 

The updated jsfiddle

Answer 2

was gerade den Knopf Typ Abbrechen ändern, um „Reset“ ?? Es ist die einfachste Lösung

<button class="btn btn-default" type="reset" ng-click="isForm = false;"> 
    Cancel 
</button> 

Answer 3

Bei einem Klick auf Schaltfläche Abbrechen, Sie form.customForm.$submitted = false;

Dies wird blenden Sie die Fehlermeldungen einstellen könnte.

Ihre Abbruchtaste wird:

<button class="btn btn-default" type="button" 
    ng-click="isForm = false; form.customForm.$submitted = false;"> 
     Cancel 
</button> 

See jsfiddle

Answer 4

das Formular einen Namen geben:

<div ng-controller="BlaController as vm"> 
    <form name="vm.formOne"> 
    </form> 
</div> 

Und in der Steuerung wie folgt vorgehen: (das ist, wie ich habe es funktioniert)

if (vm.formOne) { 
    vm.formOne.$setPristine(); 
    vm.formOne.$setUntouched(); 
    vm.formOne.$commitViewValue(); 
} 

Answer 5

$scope.cancel = function(form){ 
    $scope.isForm = true; 
    form.customForm.$submitted=false; 
    form.customForm.name.$touched = false; 
    form.customForm.age.$touched=false; 
    } 

<button class="btn btn-default" type="button" ng-click="cancel(form)" ng-show="!isForm"> 

Fiddle Demo

Oder

<button class="btn btn-default" type="button" ng-click="isForm = true; 
    form.customForm.$submitted=false; 
    form.customForm.name.$touched = false; 
    form.customForm.age.$touched=false;" ng-show="!isForm"> 

Fiddle Demo