角度材料 md-select ng-model 设置为未定义的规则答案

【问题标题】：angular material md-select ng-model set to undefined rules角度材料 md-select ng-model 设置为未定义的规则
【发布时间】：2023-03-06 01:02:01
【问题描述】：

当我执行这个脚本时，aForm.aField.$error contains {"required":true} 但是 $scope.fruit 没有设置为 undefined，即使它不在 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 被设置为 undefined：

<!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）并不总是将模型设置为未定义。

如果我希望我的第一个脚本（没有超时的脚本）将模型设置为 undefined，因为它的值不在 md-option 值中，我应该怎么做？

这些行为是否记录在某处？

规则是什么？

【问题讨论】：

检查这个 plkn embed.plnkr.co/9jvwE1l1HdmeRQkqOVoF
感谢耶稣卡拉斯科

标签： javascript angularjs validation angular-material

【解决方案1】：

我终于在 angular doc 中找到了答案...

运行每个已注册的验证器（首先是同步验证器，然后是异步验证器）。如果有效性更改为无效，则模型将设置为未定义，除非 ngModelOptions.allowInvalid 为 true。如果有效性更改为有效，它会将模型设置为最后一个可用的有效 $modelValue，即最后一个解析值或从范围中设置的最后一个值。

当字段设置为required时，有效性状态会从true变为false。

【讨论】：