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

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

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>

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

---

我还创建了一个plunker，这样你就可以看到我在说什么了。对这个问题的任何深入了解都会有很大帮助。

您正在使用

ng change=“updateForm（testForm）”

检查表单的有效性。并且在角度验证表单过程发生之前，会触发

ng change

。这就是为什么您可以在

console.log（$scope.testForm）

中看到表单是有效的，而不是在执行时

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

{{testForm.$valid}json}

---

Angular将向您显示表单的“活动状态”。

我能够通过在超时时间内包装对

$scope.updateForm

的调用来解决我的特定问题。我知道这可能不是最好的解决方案，但它符合我的目的

  <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

来更新表单的进度条。

所需属性是布尔属性，不能使用

所需=“！sex”

。删除此项也可以解决您的有效性问题。删除required=“！sex”并将其替换为required并不能解决问题。重新创建我遇到的问题的步骤是：在文本框中输入一些文本。表单现在变脏了，控制器可以看到这一点。然后在收音机中输入一个选项。表单是有效的，但是控制器没有看到。更改无线电选择或更新文本框将再次更新表单，以便控制器可以看到其有效信息。看看更新了必需属性的plunk。看起来单选按钮绑定的问题看看这里有没有一种方法可以触发表单的验证在updateForm中启动？我不这么认为，因为这不是一种推荐的角度表单方法：绑定比触发IMHO更好。

  $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