角型は選択されていない選択で有効です

Question

私は必要に応じてマークされた選択を持つ角型を持っています。

フォームがロードされるとき、地域を選択ユーザーに選択を促すメッセージが表示されます。

ただし、有効な選択肢がない場合でもフォームは有効です。

有効なオプションを選択した場合、を選択します。地域を選択すると、フォームの有効性が無効とマークされます。

なぜフォームは無効ではないのですか？

コード：

<div ng-controller="MyCtrl"> 
    <form name="myForm"> 
    <select name="region" 
      ng-model="regionId" 
      ng-options="region.id as region.name for region in regions" 
      ng-selected="region.id" 
      required> 
     <option value="">-- choose a region --</option> 
    </select> 
    </form> 
</div> 

コントローラー：ここ

function MyCtrl($scope) { 
    var myRegions = [{ id: 1, name: "England" }, 
        { id: 2, name: "Wales" }, 
        { id: 3, name: "Northern Ireland" }, 
        { id: 4, name: "Scotland" } 
        ]; 
    $scope.regions = myRegions; 
    $scope.regionId = 0; 
} 

はjsfiddleのコードです。

Answer 1

あなたは初期値$scope.regionId = 0;を設定しているため、フォームは有効です。それを削除するか、$scope.regionId = "";に置き換えてください。

ライブサンプルjsfiddleです。

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function() { 
 
    var vm = this; 
 
    var myRegions = [{ 
 
     id: 1, 
 
     name: "England" 
 
    }, { 
 
     id: 2, 
 
     name: "Wales" 
 
    }, { 
 
     id: 3, 
 
     name: "Northern Ireland" 
 
    }, { 
 
     id: 4, 
 
     name: "Scotland" 
 
    }]; 
 
    vm.regions = myRegions; 
 
    vm.regionId = ""; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController as vm"> 
 
    <form name="myForm"> 
 
     isValid: {{myForm.$valid}} 
 
     <br> 
 
     <select name="region" ng-model="vm.regionId" ng-options="region.id as region.name for region in vm.regions" ng-selected="vm.region.id" required> 
 
     <option value="">-- choose a region --</option> 
 
     </select> 
 
    </form> 
 
    </div> 
 
</div>

Answer 2

それはフォーム提出に来るときに必要なあなたはボタンを提出置く場合は、あなたのフォームはもはや有効状態を返します...、あなたはng-submitを使用していることを行うことができます

..働きませんあなたの

<input type="submit"> 

それとも、単にあなたが

として、あなたの選択に追加した最初のオプションを保つことができることで解雇され、フォームタグの属性

<option value="" disabled>-- choose a region --</option> 

この無効にすると、空の値が返されません。

また、送信フォームのことをテストする場合は、以下のスニペットを実行します。

function MyCtrl($scope) { 
 

 
    var myRegions = [ 
 
    \t \t { id: 1, name: "England" }, 
 
     { id: 2, name: "Wales" }, 
 
     { id: 3, name: "Northern Ireland" }, 
 
     { id: 4, name: "Scotland" } 
 
     ]; 
 
    $scope.regions = myRegions; 
 
    $scope.regionId = 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="MyCtrl"> 
 
    <form name="myForm"> 
 
    <select name="region" 
 
      ng-model="regionId" 
 
      ng-options="region.id as region.name for region in regions" 
 
      ng-selected="region.id" 
 
      required> 
 
     <option value="">-- choose a region --</option> 
 
    </select> 
 
    <input type="submit"> 
 
    </form> 
 
    <p ng-bind="regionId"></p> 
 
    <hr> 
 
    <span ng-show="myForm.$valid">Form Valid</span> 
 
    <span ng-show="myForm.$invalid">Form Invalid</span> 
 
</div>

Answer 3

また、フォームの$pristine性質を考慮すべきです。下記の実施例を参照してください。

angular.module("test", []).controller("MyCtrl", MyCtrl); 
 

 
function MyCtrl($scope) { 
 

 
    var myRegions = [{ 
 
    id: 1, 
 
    name: "England" 
 
    }, { 
 
    id: 2, 
 
    name: "Wales" 
 
    }, { 
 
    id: 3, 
 
    name: "Northern Ireland" 
 
    }, { 
 
    id: 4, 
 
    name: "Scotland" 
 
    }]; 
 
    $scope.regions = myRegions; 
 
    $scope.regionId = 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="test" ng-controller="MyCtrl"> 
 
    <form name="myForm"> 
 
    <select name="region" ng-model="regionId" ng-options="region.id as region.name for region in regions" ng-selected="region.id" required> 
 
     <option value="">-- choose a region --</option> 
 
    </select> 
 
    
 
    </form> 
 
    
 
    <p ng-bind="regionId"></p> 
 
    
 
    <hr> 
 
    <span ng-show="!myForm.$pristine && myForm.$valid">Form Valid</span> 
 
    <span ng-show="myForm.$pristine || myForm.$invalid">Form Invalid</span> 
 
</div>