javascript - angularJS 表单验证仅在第一次时有效

Question

我正在 angularjs 中进行表单验证，到目前为止我已经完成了 99%。但问题是我的表单验证仅在第一次提交时才正确。解释起来很困惑，但我会尽力解释:P。就是这样。当我重置表单时，它显示错误消息，字段为空(应该如此)。就像这样

之后，如果我填写 2 个字段并再次提交，我将正常工作。就像这样

现在我的问题来了。如果我重置表单(字段被清除)并提交表单，则仅显示描述字段错误，但其他两个字段中不会显示错误。就像这样

我的代码

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

Answer 1

$setPristine();可能对您寻找的内容有用。尝试添加如下所示...

<button class="button" type="reset" ng-click="form.$setPristine()">Reset</button>

有关更多信息和工作演示，请参阅以下链接

AngularJS does not proper handle button type="reset"?

您还可以引用以下链接将表单设置为原始状态

Reset form to pristine state (AngularJS 1.0.x)