角單選按鈕窗體驗證未按預期工作

Question

我有一個功能，在每個表單字段更改后都會更新。 但是，對於單選按鈕，在我兩次更改單選按鈕或更改其他字段之前，表單狀態無效。 更重要的是，當我控制台登錄表單對象時，我可以看到單選組確實有效。

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;
        }

      }
    });

我還在這里創建了一個插件，這樣您就可以了解我在說什么。 對這個問題的任何見解都會有很大的幫助。

Answer 1

您正在使用ng-change="updateForm(testForm)"來檢查表單的有效性。 並在Angular驗證表單過程發生之前觸發ng-change 。 這就是為什么您可以在console.log($scope.testForm)看到該表單有效而不是在執行時看到的原因。

為了更輕松地調試表單，我建議使用：

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

Angular將向您顯示表單的“活動狀態”。

Answer 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來更新表單的進度條。