角度清晰的子窗体数据和重置验证

Question

我正在尝试<div ng-form="vacancyForm">使用Angular.js 创建一个子表单

有一种html" target="_blank">数据具有许多字段

• 标题
• 可用日期
• 价钱

所有人都required对它们进行了验证。

提交数据后，我将按照需要进行处理，但是我想重置子表单，以使所有字段都不会变脏，并且该表单在清除字段有效的同时仍然有效，但所有字段均无效。现在脏了，但是将它们标记为无效是空的。

一个示例字段

<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>

这是提交时调用的函数

 $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

使用<form>标签并设置name属性，然后您可以$scope.formName.$setPristine();在哪里formName命名属性。更改值后，元素不再是原始的。

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

更新
上面的答案仅适用于1.2，但在1.3中，angular引入了“触摸”输入的概念。现在，当元素模糊时，角度将标记该字段为已触摸。类似于$setPristine，您可以使用来设置输入$scope.formName.$setUntouched()。

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

触摸vs原始
：触摸表示该字段已模糊，而原始表示该字段的值已被修改。Angular的文档指出，“将表单控件设置回原始状态时，将其设置回原始状态通常很有用。”

编辑
这里是一个小提琴演示：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>