关于形式的 Angular 官方文档告诉我们有很多关于形式和领域的风格和指令.对于每一个,CSS类:
ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched
Run Code Online (Sandbox Code Playgroud)
有什么区别pristine/dirty
,和touched/untouched
?
我正在尝试<div ng-form="vacancyForm">
使用Angular.js 创建一个子表单
有一种数据有很多字段
所有人都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>
Run Code Online (Sandbox Code Playgroud)
这是提交时调用的函数
$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 …
Run Code Online (Sandbox Code Playgroud) 我有一个Angular表格.使用该ng-pattern
属性验证字段.我也有一个重置按钮.我正在使用Ui.Utils Event Binder来处理这样的reset
事件:
<form name="searchForm" id="searchForm" ui-event="{reset: 'reset(searchForm)'}" ng-submit="search()">
<div>
<label>
Area Code
<input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
</label>
<div ng-messages="searchForm.areaCode.$error">
<div class="error" ng-message="pattern">The area code must be three digits</div>
</div>
</div>
<div>
<label>
Phone Number
<input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
</label>
<div ng-messages="searchForm.phoneNumber.$error">
<div class="error" ng-message="pattern">The phone number must be seven digits</div>
</div>
</div>
<br>
<div>
<button type="reset">Reset</button>
<button type="submit" ng-disabled="searchForm.$invalid">Search</button>
</div>
</form>
Run Code Online (Sandbox Code Playgroud)
正如您所看到的,当表单重置时,它会调用表单上的reset
方法$scope
.这是整个控制器的样子:
angular.module('app').controller('mainController', function($scope) {
$scope.resetCount = …
Run Code Online (Sandbox Code Playgroud) 提交表单后,我想重置表单和所有验证消息。这是小矮人:http ://plnkr.co/edit/992RP8gemIjgc3KxzLvQ? p =preview
我的代码如下:
控制器:
app.controller('MainCtrl', function($scope) {
$scope.data={fullName:''};
$scope.submit=function(){
console.log('submit')
$scope.myForm.$setPristine();
$scope.myForm.$setUntouched();
$scope.data={fullName:''};
}
});
Run Code Online (Sandbox Code Playgroud)
HTML:
<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<div>
<label class="control-label">Name</label>
<input
name="full_name"
type="text"
ng-model="data.fullName"
ng-required="true">
<p ng-if="myForm.$submitted && myForm.$invalid">Validation message</p>
</div>
<button ng-click="submit()" type="submit">
Submit
</button>
</form>
</body>
Run Code Online (Sandbox Code Playgroud)
我的问题是:当用户在输入中输入名称并单击Submit按钮时,不应显示验证消息,因为应该重置模型,表单和验证。我该怎么办?
我尝试使用$ setPristine()和$ setUntouched(),但它对我不起作用。
在AngularJS中可以做吗?谢谢!