angularjs - formulario - Despejar datos de subformas angulares y restablecer validación

validar formulario angular 5

Question

Estoy intentando crear un subformulario <div ng-form="vacancyForm"> 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 esos datos, haré lo que necesito con ellos, pero quiero restablecer el subformulario para que todos los campos no estén sucios y el formulario sea válido en el momento en que los campos funcionen, pero todos los campos no son válidos ya que Ahora están sucios, pero vacíos marcándolos como inválidos.

Un campo de ejemplo

<div class="control-group" ng-class="getErrorClasses(vacancyForm.headline)">
     <label class="control-label" for="headline">Headline</label>
     <div class="controls">
         <input type="text" class="input-xlarge" id="headline" name="headline" required ng-model="new_vacancy.headline">
         <span class="help-inline" ng-show="showError(vacancyForm.headline, ''required'')">This field is required</span>
      </div>
</div>

Esta es 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???

    }

Answer 1

use una etiqueta <form> y establezca el atributo de name y luego puede $scope.formName.$setPristine(); donde formName es lo que es el atributo name. 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, el ángulo marcará el campo como tocado. De forma similar a $setPristine , puede $setPristine la entrada usando $scope.formName.$setUntouched() .

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

tocado vs prístino : tocado significa que el campo se ha difuminado, mientras que prístino significa que el valor del campo se ha modificado. Los documentos de Angular señalan que "establecer un control de formulario de nuevo a su estado intacto a menudo es útil cuando se configura el formulario de nuevo a su estado prístino".

Editar
Aquí hay una demostración 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as ctrl">
  <form name="ctrl.myForm">
    <div>
      <label for="email">Email</label>
      <input name="myInput" type="email" ng-model="ctrl.email" id="email" required>
    </div>
    <div>
      <label for="password">Password</label>
      <input name="myPassword" type="password" minlength="8" ng-model="ctrl.password" id="password" required>
    </div>
    <div>
      <button ng-click="ctrl.reset()" type="button">Reset</button>
    </div>
  </form>
  <div>
    <h4>Form Level</h4>
    <div>$dirty: {{ctrl.myForm.$dirty}}</div>
    <div>$pristine: {{ctrl.myForm.$pristine}}</div>
    <h4>Input Level</h4>
    <h5>Email Input</h5>
    <div>$dirty: {{ctrl.myForm.myInput.$dirty}}</div>
    <div>$pristine: {{ctrl.myForm.myInput.$pristine}}</div>
    <div>$touched: {{ctrl.myForm.myInput.$touched}}</div>
    <h5>Password Input</h5>
    <div>$dirty: {{ctrl.myForm.myPassword.$dirty}}</div>
    <div>$pristine: {{ctrl.myForm.myPassword.$pristine}}</div>
    <div>$touched: {{ctrl.myForm.myPassword.$touched}}</div>
  </div>
  <div>
    <h3>Color outlines for input</h3>
    <div title="The form loads this way, it can still be invalid since required fields are empty to start with">untouched, pristine: no outline</div>
    <div title="Such as in the middle of typing a valid email for the first time">invalid, untouched, dirty: green outline</div>
    <div title="blurred with invalid input">invalid, touched, dirty: red outline</div>
    <div title="focued and blurred without typing">invalid, touched: blue outline</div>
  </div>
</div>