angularjs – 角度清除子表单数据和复位验证

发布时间：2020-12-17 08:55:58 所属栏目：安全来源：网络整理

导读：我正在尝试创建子表单 divng-form =“vacancyForm”与Angular.js 有一种类型的数据具有许多字段标题可用日期价格所有的都需要验证。一旦我提交了数据，我会做我需要的，但我想重置子窗体，所有的字段都不脏，窗体是有效的，因为在清除字段工作，但所有

我正在尝试创建子表单< divng-form =“vacancyForm”>与Angular.js

有一种类型的数据具有许多字段

>标题
>可用日期
>价格

所有的都需要验证。

一旦我提交了数据，我会做我需要的，但我想重置子窗体，所有的字段都不脏，窗体是有效的，因为在清除字段工作，但所有字段都无效，因为他们现在是脏的，但是空的标记为无效。

示例字段

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

    }

使用< form>标签并设置name属性，然后可以$ scope.formName。$ setPristine();其中formName是name属性。当值已更改时，元素不再原始。

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

更新
上面的答案只是1.2，但在1.3角引入了一个“触摸”输入的概念。现在当元素模糊时，角将标记为触摸的字段。与$ setPristine类似，您可以使用$ scope.formName。$ setUntouched()设置输入。

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

touch vs pristine：triggered表示字段已模糊，而pristine表示字段的值已修改。 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!