表单在AngularJS中未设置为具有单选按钮的有效
所以我的表单包含一个输入文本字段(ng-required="true")和一组单选按钮(每个按钮都有ng-model="House.window“ng-required="!House.window")。我注意到，如果我先选中一个单选按钮，然后在字段中键入，表单就不会生效。但如果我在字段中键入，然后选中一个单选按钮，它就会验证。
但是，即使我按照正确的顺序执行了这些步骤，并且表单进行了验证，一旦触发了提交函数，它也会被用来重置字段。因此，文本字段被设置为空字符串，单选按钮被设置为false。但是如果我从输入名称开始，即使我还没有选择单选按钮，表单也会立即生效。
为什么会发生这些事情，我如何才能修复它们？
编辑:我试着做一个与我正在做的类似的例子，但不幸的是，我一直在plunkr上得到一个我不能解决的角度模块错误。这不是我在最终代码中得到的错误。如果有人可以通过各种方式解决这个问题，这将有助于主题的前进: plnkr.co/edit/vW6atqN0oYKz7AgUa108
回答 2
Stack Overflow用户
发布于 2018-07-13 06:22:20
你需要在你的控制器中初始化$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>
Stack Overflow用户
发布于 2018-07-13 07:33:24
虽然@john-rix answer没有解决我的问题，但它确实帮助我找到了解决方案。我试图重置无线电输入的方法是将它们的模型设置为false，但这似乎仍然算作有效值，因此输入仍将设置为ng-valid。因此，我没有将其设置为false，而是将其设置为null，从而将其设置为nd-invalid。希望这能帮助其他被卡住的人。
https://stackoverflow.com/questions/51294708
复制相似问题
腾讯云开发者
