角度形式與未選擇的選擇有效

Question

我有一個角度表單，它有一個select，它被標記爲必需。

當窗體加載時，一個選擇一個區域消息顯示爲提示用戶進行選擇。

但是，即使表單沒有有效的選擇，表單也是有效的。

如果用戶選擇了有效選項，則選擇選擇區域表單驗證將表單標記爲無效。

爲什麼表格不是無效的？

代碼：

<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 = "";即可。

現場示例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> 

該禁用將不允許它返回空值。

此外，如果你想測試提交表單的東西，運行下面的代碼片段。因爲你設置的初始值$scope.regionId = 0;

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>