Datos de subformulación claros angulares y validación de restablecimiento

Estoy intentando crear un subformulario

con Angular.js

Hay un tipo de datos que tiene numerosos campos

  • Titular
  • Fecha disponible
  • Precio

Todos han required validación en ellos.

Una vez que envíe los datos, haré lo que necesite con ellos, pero quiero restablecer el subformulario para que todos los campos no estén sucios y el formulario sea válido, ya que al momento los campos funcionan, pero todos los campos son inválidos ya que ahora están sucias, pero vacías, marcándolas como inválidas.

Un campo de ejemplo

 
This field is required

Aquí está la función que se llama cuando se envía

  $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??? } 

use una etiqueta

y establezca el atributo name y luego puede $scope.formName.$setPristine(); donde formName es el nombre del atributo. Un elemento ya no es prístino cuando el valor ha sido cambiado.

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

Actualizar
La respuesta anterior fue únicamente para 1.2, pero en 1.3 angular introdujo el concepto de una entrada “tocada”. Ahora cuando un elemento está borroso, angular marcará el campo como tocado. Similar a $setPristine , puede configurar la entrada utilizando $scope.formName.$setUntouched() .

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

tocado vs prístino : tocado significa que el campo ha sido borroso mientras que prístino significa que el valor del campo ha sido modificado. Los documentos de Angular señalan que “Establecer un formulario de control de nuevo en su estado intacto suele ser útil al volver a establecer el formulario en su estado prístino”.

Editar
Aquí hay una demo de violín: 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