角度单选按钮表单验证未按预期工作答案

【问题标题】：Angular Radio Button Form Validation Not Working As Expected角度单选按钮表单验证未按预期工作
【发布时间】：2015-06-18 16:07:31
【问题描述】：

我有一个在每个表单字段更改后更新的功能。但是，对于单选按钮，在我更改单选按钮两次或更改不同字段之前，表单状态无效。更重要的是，当我控制台记录表单对象时，我可以看到无线电组确实有效。

HTML

 <div ng-controller="formController">
  <form name="testForm" novalidate>
    <input type="text" name="name" placeholder="Name" ng-model="name" required ng-change="updateForm(testForm)">
    <ng-form name="radioGroup">
      <input type="radio" name="radioGroup1" required="!sex" ng-model="sex" value="male" ng-change="updateForm(testForm)"/> Male
      <input type="radio" name="radioGroup2" required="!sex" ng-model="sex" value="female" ng-change="updateForm(testForm)"/> Female
    </ng-form>
  </form>

  <div ng-show="testForm.$dirty">
    Form Dirty
  </div>
  <div ng-show="isFormDirty">
    From Dirty from controller
  </div>
  <div ng-show="testForm.$valid">
    Form Valid
  </div>
    <div ng-show="isFormValid">
    From Valid from controller
  </div>
</div>

还有 Javascript

angular.module('app',[]).controller('formController', function($scope)         {
      $scope.hello = 'hello from controller';
      $scope.name = null;
      $scope.sex = null;
      $scope.isFormDirty = null;
      $scope.isFormValid = null;

      $scope.updateForm = function(form) {

        if(form.name.$dirty || form.radioGroup.$dirty) {
          $scope.isFormDirty = true;
        }

        if(form.name.$valid && form.radioGroup.$valid) {
          $scope.isFormValid = true;
        }

      }
    });

我还创建了一个 plunker here，所以你可以看到我在说什么。对此问题的任何见解都会有很大帮助。

【问题讨论】：

必填属性为布尔属性，不能使用required="!sex"。删除它也可以解决您的有效性问题。
删除 required="!sex" 并将其替换为 required 并不能解决问题。重新创建我遇到的问题的步骤是：在文本框中输入一些文本。表单现在很脏，控制器可以看到。然后在收音机中输入一个选项。表单是有效的，但是控制器没有看到。更改单选选项或更新文本框将再次更新表单，以便控制器可以看到其有效。看看 this plunk 和更新的 required 属性。
看起来像单选按钮绑定的问题看看这里stackoverflow.com/questions/15778739/…

标签： javascript angularjs forms validation

【解决方案1】：

您正在使用ng-change="updateForm(testForm)" 检查表单的有效性。并且ng-change 在 Angular 验证表单过程发生之前被触发。这就是为什么您可以在console.log($scope.testForm) 中看到该表单有效且在执行时无效。

为了更轻松地调试您的表单，我建议使用：

<pre>{{ testForm.$valid | json }}</pre>

Angular 会显示表单的“实时状态”。

【讨论】：

有没有办法在 updateForm 中触发表单验证？
我不这么认为，因为它不是 Angular 表单的推荐方法：绑定比触发恕我直言。

【解决方案2】：

我能够通过在超时中结束对$scope.updateForm 的调用来解决我的具体问题。我知道这可能不是最好的解决方案，但它适用于我的目的

  $scope.callTimeout = function(form) {
    $timeout(function() {
      $scope.updateForm(form);
    }, 0)
  }

然后

  <input type="radio" name="radioGroup1" required ng-model="sex" value="male" ng-change="callTimeout(testForm)" ng-click/> Male
  <input type="radio" name="radioGroup2" required ng-model="sex" value="female" ng-change="callTimeout(testForm)" ng-click/> Female

另外这只是我正在进行的一个更大项目的演示。我没有使用$scope.updateForm 来实际检查用户消息的表单验证，在这种情况下我只检查$dirty 和$valid 来更新表单的进度条。

【讨论】：