Données de sous-formulaire claires angulars et validation de la réinitialisation

J’essaie de créer un sous-formulaire

avec Angular.js

Il existe un type de données comportant de nombreux champs

  • Gros titre
  • Date de disponibilité
  • Prix

Tous ont required validation.

Une fois que je soumets ces données, je vais faire ce dont j’ai besoin, mais je veux réinitialiser le sous-formulaire afin que tous les champs ne soient pas sales et que le formulaire soit valide pour le moment. sont maintenant sales, mais vides les marquant comme non valides.

Un champ exemple

 
This field is required

Voici la fonction appelée lors de la soumission

  $scope.addVacancy = function(){ // save the submitted data $scope.school.vacancies.push($scope.new_vacancy); // now clear it out $scope.new_vacancy = {}; $scope.new_vacancy.date = new Date(); // this clears out all the fields and makes them all invalid // as they are empty. how to reset the form??? } 

utilisez une

et définissez l’atsortingbut name , puis vous pourrez $scope.formName.$setPristine();formName est ce que l’atsortingbut name est. Un élément n’est plus vierge lorsque la valeur a été modifiée.

http://docs.angularjs.org/api/ng.directive:form.FormController#$setPristine

Mettre à jour
La réponse ci-dessus était uniquement pour 1,2, mais en 1.3 angular introduit le concept d’une entrée “touchée”. Maintenant, lorsqu’un élément est flou, l’angle sera marqué comme étant touché. Semblable à $setPristine , vous pouvez définir l’entrée en utilisant $scope.formName.$setUntouched() .

https://docs.angularjs.org/api/ng/type/form.FormController#$setUntouched

touched vs pristine : touched signifie que le champ a été flou tandis que pristine signifie que la valeur du champ a été modifiée. Les documents d’Angular indiquent que “rétablir l’état inchangé des contrôles de formulaire est souvent utile lors de la restauration du formulaire dans son état d’origine.”

modifier
Voici une démo de violon: https://jsfiddle.net/TheSharpieOne/a30kdtmo/

 angular.module('myApp', []) .controller('myCtrl', myCtrl); function myCtrl() { var vm = this; vm.reset = function() { vm.myForm.$setPristine(); vm.myForm.$setUntouched(); vm.email = vm.password = ''; } } 
 .ng-invalid.ng-touched { outline: 2px solid blue; } .ng-invalid.ng-dirty { outline: 2px solid red; } .ng-invalid.ng-dirty.ng-untouched { outline: 2px solid green; } form, form div { padding: 5px 10px; } h3, h4 { margin-bottom: 0; } 
  

Form Level

$dirty: {{ctrl.myForm.$dirty}}
$pristine: {{ctrl.myForm.$pristine}}

Input Level

Email Input
$dirty: {{ctrl.myForm.myInput.$dirty}}
$pristine: {{ctrl.myForm.myInput.$pristine}}
$touched: {{ctrl.myForm.myInput.$touched}}
Password Input
$dirty: {{ctrl.myForm.myPassword.$dirty}}
$pristine: {{ctrl.myForm.myPassword.$pristine}}
$touched: {{ctrl.myForm.myPassword.$touched}}

Color outlines for input

untouched, pristine: no outline
invalid, untouched, dirty: green outline
invalid, touched, dirty: red outline
invalid, touched: blue outline