角度形式对未选择的选择有效

Question

我有一个带有选择的 Angular 表单，它被标记为必需。

当表单加载时，会显示选择区域消息以提示用户进行选择。

但是，即使没有有效的选择，表单也是有效的。

如果用户选择了一个有效选项，则选择选择一个区域表单验证会将表单标记为无效。

为什么表格一开始就无效？

代码：

<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

您还应该考虑表单的$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>

Answer 3

form-submission..

如果您放置 提交按钮，您的表单将不再返回有效状态...您可以在表单标签中使用 ng-submit 属性来做到这一点会被你解雇的

<input type="submit">

或者您可以简单地将您添加到选择中的第一个选项保留为

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

此禁用将不允许它返回空值。

此外，如果您想测试提交表单的东西，请运行下面的 sn-p。

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