javascript - Angular 验证不适用于选择

Question

它是一个简单的表单，一个下拉菜单和一个保存按钮。在页面加载时，Select 应该是 ng-invalid，因为它是必需的，并且没有选择任何内容，但 form 和 select 都是 ng-valid，并且调用了保存函数。 一旦我选择任何东西并取消选择它。那么它的行为就正常了。

            <form role="form" name="frmVariableConfig" id="frmVariableConfig" novalidate ng-submit="frmVariableConfig.$valid && saveChanges()">

            <div>
                <div class="form-group">
                    <div class="form-group control-group">
                        <span>Logic</span>


                        <select name="service_id" class="Sitedropdown" style="width: 220px;"
                                ng-model="CurrCustomer.Logic"
                                ng-options="service.ServiceID as service.ServiceName for service in services"
                                required="">
                            <option value="">Select Service</option>
                        </select>
                    </div>

                </div>
            </div>
            <div>
                <button type="submit" class="btn btn-sm text-right">Save</button>
            </div>
        </form>

Controller 代码如下所示。

(function () {
'use strict';
var controllerId = 'dashboard';
angular.module('app').controller(controllerId, ['$scope', dashboard]);

function dashboard($scope) {


    $scope.CurrCustomer = {};
    $scope.CurrCustomer.Logic = false;
    $scope.saveChanges = function () {
        alert('function called');

    };
    $scope.services = [
{ ServiceID: 1, ServiceName: 'Service1' },
{ ServiceID: 2, ServiceName: 'Service2' },
{ ServiceID: 3, ServiceName: 'Service3' }
    ];
}})();

Answer 1

您需要从 Controller 中删除填充该 ng-model 并使其在 Controller 加载时有效的 setter $scope.CurrCustomer.Logic = false;。填充 CurrCustomer.Logic 值后，它将成为所需的有效输入。