Javascript angularJS表单验证仅第一次有效
我正在用angularjs进行表单验证,到目前为止,我已经完成了99%。但问题是我的表单验证工作只在第一次提交时才正确。解释起来很混乱,但我会尽力解释:P,给你。当我重置表单时,它会显示错误消息,说明字段是空的(应该是空的) 之后,如果我填写两个字段并再次提交,我将按照它应该的方式正确工作 现在我的问题来了。如果我重置表单(字段被清除)并提交表单,只会显示“描述”字段错误,而不会显示在其他两个字段中。像这样 我的代码Javascript angularJS表单验证仅第一次有效,javascript,html,angularjs,forms,validation,Javascript,Html,Angularjs,Forms,Validation,我正在用angularjs进行表单验证,到目前为止,我已经完成了99%。但问题是我的表单验证工作只在第一次提交时才正确。解释起来很混乱,但我会尽力解释:P,给你。当我重置表单时,它会显示错误消息,说明字段是空的(应该是空的) 之后,如果我填写两个字段并再次提交,我将按照它应该的方式正确工作 现在我的问题来了。如果我重置表单(字段被清除)并提交表单,只会显示“描述”字段错误,而不会显示在其他两个字段中。像这样 我的代码 <form name="userForm" ng-submit="
<form name="userForm" ng-submit="submitForm(userForm.$valid, user)" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && userForm.name.$dirty && submitted || (userForm.name.$invalid && userForm.name.$pristine) && submitted }">
<label>Name*</label>
<input type="text" name="name" class="item-input-wrapper" ng-model="user.name" required>
<label><p ng-show="submitted && userForm.name.$error.required" class="help-block "><font color="#009ACD">You name is required.</font></p></label>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && userForm.email.$dirty && submitted || userForm.email.$invalid && userForm.email.$pristine && submitted }">
<label>Email</label>
<input type="email" name="email" class="item-input-wrapper"ng-model="user.email" required >
<label><p ng-show="userForm.email.$invalid && userForm.email.$dirty && submitted || userForm.email.$invalid && userForm.email.$pristine && submitted" class="help-block"><font color="#009ACD">Enter a valid email.</font></p></label>
</div>
<!-- DESCRIPTION -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && userForm.username.$dirty && submitted || userForm.username.$invalid && userForm.username.$pristine && submitted }">
<label>Description</label>
<input type="text" name="username" class="item-input-wrapper" ng-model="user.username" ng-minlength="5" ng-maxlength="60" required>
<label><font color="white"><p ng-show="userForm.username.$error.minlength && submitted" class="help-block"><font color="#009ACD">Description is too short.</font></p></label>
<label><p ng-show="userForm.username.$error.maxlength && submitted" class="help-block"><font color="#009ACD">Description is too long.</font></p></label>
<label><p ng-show="submitted && userForm.username.$error.required" class="help-block "><font color="#009ACD">Description is required.</font></p></label>
</div>
<div class="col"style="text-align: center">
<button align="left"class="button button-block button-reset" type="reset" value="Reset" style="display: inline-block;width:100px;text-align:center "
ng-click="submitted=false" padding-top="true">Reset</button>
<button class="button button-block button-positive" style="display: inline-block;width:100px "
ng-click="submitted=true" type="submit" padding-top="true">Submit</button>
</div>
</form>
</div>
名字*
您的姓名是必需的
电子邮件
输入有效的电子邮件
描述
说明太短
说明太长
需要说明
重置
提交
$setPristine();可能对你所寻找的有用。尝试添加如下所示的内容
<button class="button" type="reset" ng-click="form.$setPristine()">Reset</button>
重置
有关更多信息和工作演示,请参阅以下链接
您也可以参考下面的链接,将表单设置为原始状态
找到了解决办法 在你的控制器里添加这个
$scope.reset = function() {
$scope.user = angular.copy($scope.orig);
$scope.userForm.$setPristine();
};
这里的“userForm”应该是您的表单名,“user”应该是您的模型。这对我很有用。试试看
<form name="forms.sample" novalidate>
<md-input-container class="md-block" flex-gt-sm>
<label>Name:</label>
<input ng-focus="focus=true" ng-blur="focus=false" style="width:400px;" class="form-control" name="Name" type="text" data-ng-model="Name" ng-pattern="SomePattern" required placeholder="enter the Name here" />
<div ng-messages for="forms.sample.Name.$error" ng-if="!focus">
<div ng-if='forms.sample.Name.$touched' ng-message="required">This is required.</div>
<div ng-if='forms.sample.Name.$touched' ng-message="pattern">Enter a valid domain name</div>
</div>
</md-input-container>
</form>
姓名:
这是必需的。
输入有效的域名
查看逻辑:userForm.email.$invalid&&userForm.email.$dirty&&submitted | | | userForm.email.$invalid&&userForm.email.$pristite&&submitted-由于$dirty和$pristite是直接对立的,我认为可以将其简化为:userForm.email.$invalid&&submitted | | | userForm.email.$invalid&&submitted。此外,我认为$dirty和$pristine只适用于整个表单,而不适用于单个输入,但我承认,我从未使用过它们。