Question

当我执行此脚本时，aForm.aField。$ error包含{“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”条件似乎会影响“set to undefine”mecanism。

所以看起来md-select（因为有角度）并不总是在模型不是有效值时将模型设置为undefined。

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

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

有什么规则？

Answer 1

最后我终于在棱角分明的文档中找到了答案......

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

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

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

1 个答案: