角度材質md-select ng-model設置爲未定義規則

當我執行此腳本時，aForm.aField。$ error包含{「required」：true}但是$ scope.fruit未設置爲undefined，即使它不是在md選項值中。因此，「必需」驗證已完成，但未設置爲未定義。角度材質md-select ng-model設置爲未定義規則

<!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>

當我看角的代碼，調用$$ runValidators的時候，有這個「prevValid」條件，似乎影響「設置爲undefine」機制。

因此，似乎md-select（因爲角度）並不總是將模型設置爲undefined，因爲它不是有效值。

如果我希望我的第一個腳本（沒有超時的腳本）將模型設置爲未定義，因爲它的值不在md選項值中，該怎麼辦？

這些行爲是否記錄在某處？

有什麼規則？

來源

2017-09-01 Leto

檢查此plkn https://embed.plnkr.co/9jvwE1l1HdmeRQkqOVoF/ –

謝謝耶穌卡拉斯科 – Leto

以及最後我發現在角DOC答案... ...每一個註冊的驗證器（第一同步驗證，然後異步驗證）的

上運行。如果有效性更改爲無效，則模型將設置爲undefined，除非ngModelOptions.allowInvalid爲true。如果有效性更改爲有效，它會將模型設置爲最後一個可用的有效$ modelValue，即最後解析的值或從範圍中設置的最後一個值。

事實上，當字段設置爲required時，有效性狀態從true變爲false。

來源

2017-09-05 14:12:25 Leto

角度材質md-select ng-model設置爲未定義規則

回答

相關問題