Question

在我的HTML中：

<form class="form_page login-frm" name="loginForm" novalidate>
   <input type="email" ng-model="data.username" name='username' required autofocus>
   <div class="info-message">
     <small ng-show='(loginForm.username.$error.required || loginForm.username.$error.email) && loginForm.username.$dirty'>The acceptable format for the username includes an '@'.
     </small>
   </div>
   <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>

在控制器中：

$scope.cancel = function() {
  $scope.loginForm.$setPristine();
  angular.element(this)[0].loginForm.$setPristine();
  delete $scope.data.username;
};

但在此之后，如果用户名不正确并显示错误消息并且单击取消按钮，则错误消息将被删除，但用户名字段永远不会清空。如何清空用户名。同样在删除值之后为什么它可见？

Answer 1

将$scope.data.username设置为空字符串或未定义，而不是删除它。您也不需要控制器中带有angular.element(...)的行。

Answer 2

我创建了plunkr来回答你的问题。 http://plnkr.co/edit/1XblX3?p=preview 以更面向对象的方式，你应该这样做。

var User = function(username) {
    this.username = username;
};
User.prototype.reset = function() {
    this.username = "";
};
$scope.user = new User("Ali");
$scope.cancel = function() {
    $scope.message = "Resetting form";
    $scope.userForm.$setPristine();
    $scope.user.reset();
};

即使在将表单设置为pristine之后，表单字段也没有重置错误：AngularJs

2 个答案: