Question

我的AngularJS应用程序中的select有以下问题。我已设置必需属性，但它不适用于选择标记。不触发原生验证。这是我的HTML代码：

<div ng-app="app">
    <div ng-controller="testCtrl">
        <form ng-submit="selectChanged()">
        <select ng-model="first" required="required">
            <option>choose</option>
            <option value="2">2</option>
        </select>
            <input type="submit" value="test"/>
        </form>
    </div>
</div>

这是我的控制器：

angular.module('app', []).controller('testCtrl', function ($scope) {
    $scope.selectChanged = function () {

    };
});

这是工作jsfiddle： http://jsfiddle.net/zono/k3b5J/3/

祝你好运。

Answer 1

您需要使用提交按钮连接表单有效期，例如所以当表单无效时它会被禁用

<div ng-app="app">
    <div ng-controller="testCtrl">
        <form name="myform" ng-submit="selectChanged()">
        <select ng-model="first" required="required">
            <option>choose</option>
            <option value="2">2</option>
        </select>
            <input type="submit" value="test" ng-disabled="!myform.$valid"/>
        </form>
    </div>
</div>

我更新了你的小提琴以反映：http://jsfiddle.net/qt8z3/

Answer 2

问题在于，当未定义选项值时，文本将被视为值，因此，选择choose时，first的实际值应为choose。< / p>

您的代码可以像这样修复：

<div ng-app="app">
    <div ng-controller="testCtrl">
        <form ng-submit="selectChanged()">
        <select ng-model="first" required="required">
            <option value="">choose</option>
            <option value="2">2</option>
        </select>
            <input type="submit" value="test"/>
        </form>
    </div>
</div>

value

上注意<option value="">choose</option>

编辑注释：当选择choose时，值实际存在，因此填写了字段并通过了所需的验证。

Answer 3

您的代码应为：

angular.module('app', []).controller('testCtrl', function ($scope) {
    $scope.first = "";
    $scope.selectChanged = function () {
        alert($scope.first);
    };
});

在这种情况下，您没有添加select绑定的变量$scope.first。而空选项的值应为"" - ＆gt; <option value ="">choose</option>

这是一个工作小提琴：http://jsfiddle.net/k3b5J/4/

AngularJS必需属性对select不起作用

3 个答案: