当我执行此脚本时，aForm.aField.$error 包含 {"required":true} 但 $scope.fruit 未设置为未定义，即使它不在 md-option 值中。因此“必需的”验证已完成，但未设置为未定义。
<!doctype html>
<html ng-app="anApp">
<head>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script>
angular.module('anApp', ['ngMessages', 'ngMaterial'])
.controller('aController', function ($scope, $timeout) {
$scope.fruitBasket = [{name:"apple", id:1}];
$scope.fruit = 100;
$scope.required = true;
});
</script>
</head>
<body ng-controller="aController">
{{aForm.aField.$error}}<br> [{{fruit}}]
<br>
<form name="aForm">
<md-input-container>
<label>Fruit</label>
<md-select name="aField" ng-required="required" ng-model="fruit">
<md-option ng-repeat="unFruit in fruitBasket" ng-value="unFruit.id"> {{unFruit.name}} </md-option>
</md-select>
<div ng-messages="aForm.aField.$error">
<div ng-message="required">Fruit required</div>
</div>
</md-input-container>
</form>
</body>
</html>
但是当我执行这个脚本时，$scope.fruit在执行超时后被设置为未定义:
<!doctype html>
<html ng-app="anApp">
<head>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script>
angular.module('anApp', ['ngMessages', 'ngMaterial'])
.controller('aController', function ($scope, $timeout) {
$scope.fruitBasket = [{name:"apple", id:1}];
$scope.fruit = 100;
$scope.required = false;
$timeout(function() {
$scope.required = true;
}, 1000);
});
</script>
</head>
<body ng-controller="aController">
{{aForm.aField.$error}}<br> [{{fruit}}]
<br>
<form name="aForm">
<md-input-container>
<label>Fruit</label>
<md-select name="aField" ng-required="required" ng-model="fruit">
<md-option ng-repeat="unFruit in fruitBasket" ng-value="unFruit.id"> {{unFruit.name}} </md-option>
</md-select>
<div ng-messages="aForm.aField.$error">
<div ng-message="required">Fruit required</div>
</div>
</md-input-container>
</form>
</body>
</html>
当我查看 Angular 的代码时，在调用 $$runValidators 时，有一个“prevValid”条件似乎会影响“设置为取消定义”机制。
因此，当模型不是有效值时，md-select(由于 Angular )似乎并不总是将模型设置为未定义。
如果我希望我的第一个脚本(没有超时的脚本)将模型设置为未定义，因为它的值不在 md-option 值中，我该怎么办？
这些行为是否记录在某处？
规则是什么？
最佳答案
终于我在 Angular 文档中找到了答案......
Runs each of the registered validators (first synchronous validators and then asynchronous validators). If the validity changes to invalid, the model will be set to undefined, unless ngModelOptions.allowInvalid is true. If the validity changes to valid, it will set the model to the last available valid $modelValue, i.e. either the last parsed value or the last value set from the scope.
事实上，当字段设置为必填时，有效性状态会从 true 变为 false。
关于javascript - Angular Material md-select ng-model 设置为未定义的规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46005490/