Question

这是我的HTML格式

        <form id = "myform" name="myform"  ng-submit="saveForm()" novalidate >

            <div class="input-group">
                <span class="input-group-addon"> <img src="/icon.png" alt=""/> </span>                    
                <input type="text" class="form-control" id="username" name="username" ng-model="username" placeholder="Username" autofocus required>                    
            </div>
            <span ng-show="formInvalid">Please enter username</span>


            <button type="submit" class="btn btn-default" id="saveBtn"> Save </button>
        </form>

在控制器里面我有

$scope.formInvalid = false;

$scope.saveForm = function(){  
  if($scope.myform.username.$invalid){  
       $scope.formInvalid = true;
  }

if($scope.myform.$valid){
//....save it....

首先表单没有错误信息，如果我点击“保存”，“请输入用户名”出现，到目前为止，一切都很好。

但是，如果我单击表单字段以键入用户名，则错误消息不会消失。即使我完成输入并单击其他位置，错误消息仍然不会消失。

我也试试

  if(!$scope.myform.username.$valid){  
       $scope.formInvalid = true;
  }

我也一起尝试

  if(!$scope.myform.username.$valid){  
       $scope.formInvalid = true;
  }

  if($scope.myform.username.$valid){  
       $scope.formInvalid = false;
  }

问题仍然存在。我怎么调试？我该如何解决这个问题？

由于

Answer 1

您不必为管理表单状态而引入和维护新变量（$scope.formInvalid）。 Angular会为您维护表单的有效/无效状态。

由于您的表单已命名为myform，因此只需根据myform.username.$invalid的值显示有关用户名的消息，并仅在myform.$valid为 true时保存表单：

<强> HTML

<span ng-show="myform.username.$invalid">Please enter username</span>

<强> JS

$scope.saveForm = function () {
  if ($scope.myform.$valid) {
    // save the form
  }
};

参见 fiddle

Answer 2

您可以尝试观看活动，

$scope.$watch('myform.$valid', function(n, o) {
if(n) {
$scope.formInvalid = false;
} else {
$scope.formInvalid = true;
}
});

但如果你开始使用验证器，我甚至可能会更好。

Answer 3

你没有触发改变以在任何地方形成无效的属性，我建议你用验证器和ng-messages模块中内置的角度来解决这个问题，它会监听你的变化，形成输入并在输入时通知有效或无效并通知警告文本。您可以采用的另一种方法是在要监听的输入上使用ng-change指令，根据输入的有效性触发和更新表格无效属性。

示例:(取自官方角网站）

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

我认为这是最优雅的方式。

在角形式验证后，错误消息不会隐藏

3 个答案: