角度單選按鈕表單驗證不能按預期工作

我有一個函數在每個表單域更改後更新。然而，對於單選按鈕，直到我更改單選按鈕兩次或更改其他字段時，表單狀態纔有效。更重要的是，當我登錄表單對象時，我可以看到收音機組確實有效。角度單選按鈕表單驗證不能按預期工作

的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所以你可以看到我在說什麼。對這個問題的任何瞭解都將是一個很大的幫助。

來源

2015-06-18 jdpipkin

必需屬性是布爾屬性，不能使用'required =「！sex」'。刪除這也解決了你的有效性問題。 –

刪除required =「！sex」並用required替換它並不能解決問題。重新創建我遇到的問題的步驟是：在文本框中輸入一些文本。表單現在很髒，控制器可以看到。然後在收音機中輸入選項。該表格是有效的，但控制器沒有看到。更改無線電選擇或更新文本框將再次更新表格，以便控制器可以看到其有效。看看[this]（http://plnkr.co/edit/daAxHdbUojLjGZCWmrI9）plunk與更新的必需屬性。 – jdpipkin

看起來像單選按鈕綁定問題在這裏看看http://stackoverflow.com/questions/15778739/angularjs-required-radio-buttons-needs-two-click-events-to-be-valid –

我能夠解決我的具體問題，將我的電話打到$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以更新表單的進度條。

來源

2015-07-09 14:54:19 jdpipkin

您正在使用ng-change="updateForm(testForm)"檢查表單的有效性。並且在角度驗證表單處理髮生之前觸發ng-change。這就是爲什麼你可以在console.log($scope.testForm)中看到這個表格是有效的，而不是在執行。

要調試更輕鬆的形式，我建議使用：

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

角會告訴你你的窗體的「活態」。

來源

2015-06-18 17:01:18

是否有一個觸發窗體的驗證在updateForm中觸發的方法？ – jdpipkin

我不這麼認爲，因爲它不是Angular形式的推薦方法：綁定比觸發IMHO更好。 –

角度單選按鈕表單驗證不能按預期工作

回答

相關問題