AngularJS中的單選按鈕未將表單設置為有效

Question

所以我有一個帶有一個輸入文本字段（ng-required =“ true”）和一組單選按鈕的表單（每個都有ng-model =“ House.window” ng-required =“！House.window”）。 我注意到，如果我先檢查一個單選按鈕，然后在字段中鍵入，該表單將無法驗證。 但是，如果我在該字段中鍵入，然后選中一個單選按鈕，則它將生效。

但是，即使我確實按照正確的順序執行了這些步驟，並且表單通過了驗證，但一旦提交函數觸發，它就會重置字段。 因此，文本字段設置為空字符串，單選按鈕設置為false。 但是，如果我隨后輸入名稱，即使我尚未選擇單選按鈕，該表單也會立即生效。

這些事情為什么會發生，我該如何解決？

編輯：我試圖做一個類似於我在做的例子，但不幸的是我一直在plunkr上收到一個我不知道的角度模塊錯誤。 這不是我在最終代碼中遇到的錯誤。 如果有人可以解決所有問題，它將有助於該主題的發展：plnkr.co/edit/vW6atqN0oYKz7AgUa108

Answer 1

您需要在控制器中初始化$ scope.Person。 出於某種原因，我暫時不知道，選擇單選按鈕不會自動初始化Person對象，而在文本字段中輸入內容卻會自動初始化（解釋以不同順序執行操作時觀察到的行為）。

 var MyApp = angular.module('MyApp', []); MyApp.controller('MyAppController', [ '$scope', function($scope) { $scope.colors = [ 'Red', 'Blue', 'Yellow', 'Green']; $scope.Person = {}; $scope.addPerson = function() { var person = { 'name' : $scope.Person.name, 'favoriteColor' : $scope.Person.favoriteColor }; $scope.Person = {}; }; }]);

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script> </head> <body ng-app="MyApp" ng-controller="MyAppController"> <form name="newPerson" ng-submit="addPerson()"> <div> <input type="text" name="name" ng-model="Person.name" ng-required="true" placeholder="Name" /> </div> <div> <ul> <li ng-repeat="color in colors"> <input type="radio" value="{{color}}" name="favoriteColor" ng-model="Person.favoriteColor" ng-required="!Person.favoriteColor"/>{{color}} </li> </ul> </div> <div> <button type="submit" class="btn btn-light btn-md" ng-disabled="newPerson.$invalid" role="button"> Add person </button> </div> </form> </body> </html>

Answer 2

雖然@ john-rix答案不能解決我的問題，但確實可以幫助我找出解決方案。 我嘗試重置無線電輸入的方法是將它們的模型設置為false但這似乎仍算作有效值，因此輸入仍將設置為ng-valid 。 因此，不是將其設置為false而是將其設置為null ，並將其設置為nd-invalid 。 希望可以幫助陷入困境的其他人。

AngularJS中的單選按鈕未將表單設置為有效

問題描述

2 個解決方案

解決方案1
1 2018-07-12 22:22:19

解決方案2
0 2018-07-12 23:33:23

AngularJS中的單選按鈕未將表單設置為有效

問題描述

2 個解決方案

解決方案1 1 2018-07-12 22:22:19

解決方案2 0 2018-07-12 23:33:23

解決方案1
1 2018-07-12 22:22:19

解決方案2
0 2018-07-12 23:33:23