Question

我正在使用angularjs执行一个注册页面。

关注我的html代码：

    <form name="frominline" action="post" class="clearfix form-hidden" id="Register-form">
                                 <div class="col-md-12">

                                    <div class="input-group blmd-form">
                                        <div class="blmd-line">
                                            <input type="text" name="userid" autocomplete="off" id="username" class="form-control" required autofocus="" ng-model="user.name"  ng-minlength="3" ng-maxlength="12" ng-model-options="{ allowInvalid: true }">
                                            <label class="blmd-label">User Id</label>
                                        </div>

                                         <p   class="login-error" ng-show="frominline.userid.$dirty && frominline.userid.$error.required">
                                                <span style="color : red">required</span>
                                          </p>

                                          <p ng-show="frominline.userid.$error.minlength" class="help-block" style="color:red;">Username is too short.</p>
                                          <p ng-show="frominline.userid.$error.maxlength" class="help-block" style="color:red;">Username is too long.</p>
                                    </div>
                                       <div class="input-group blmd-form">
                                        <div class="blmd-line">
                                            <input type="email" name="email" autocomplete="off" id="email" class="form-control" required autofocus="" ng-model="user.email">
                                            <label class="blmd-label">Email</label>

                                        </div>
                                         <span class="login-error" ng-show="frominline.email.$error.required && frominline.email.$dirty" style="color:red;" ng-model-options="{ allowInvalid: true }">required</span>
                                            <span  class="login-error" ng-show="!frominline.email.$error.required && frominline.email.$error.email && frominline.email.$dirty" style="color:red;">invalid email</span>
                                </div>
<button type="reset" ng-click="resetform(frominline)">reset</button>
    </form>

My js code:
app.controller('loginCtrl'['$scope',function('$scope'){
 var user = this;
$scope.resetform(form){
user.name='';
user.email='';
    $scope.frominline.$dirty = false;
    $scope.frominline.$pristine = true;
    $scope.frominline.$submitted = false;
}]);

现在，在第一张图片中，这些是验证错误。现在，我点击了重置按钮，验证错误消失了，但在第二张图片中，我得到了必填字段。

是否可以帮助我点击按钮删除或重置整个表单？

我尝试了许多选项，例如$setPristine()或$setValidity()，但我无法解决此问题＆＃34;必需＆＃34;错误信息。

点击重置按钮

后，只显示表单图片，只显示必填错误消息

Answer 1

表单可能已清除，但那些输入字段不是。当您显示特定字段的错误（例如ng-show="frominline.userid.$error.minlength"）时，也包括表单的状态（例如ng-show="frominline.$submitted && frominline.userid.$error.minlength"）。

单击按钮时，在注册表单中恢复表单和清除错误验证

1 个答案: