Question

我的控制器中有一个功能，用于验证是否有最多三个选项来自可用复选框和一个自由文本区域。用户可以选择三个复选框并将文本区域留空，也可以选择两个复选框并在文本区域中键入一些文本。允许三者的组合。此字段为required，用户必须选择三者的组合。该功能本身正在运行，但验证显示成功！问题是当页面加载时，所有选项都变为绿色并显示成功消息，而用户甚至没有点击它的任何部分。

这是html代码：

<form name="Form">
    <div class="form-group" >
        <div class="form-group" ng-class="{'has-error':Form.cooptype.$dirty && Form.cooptype.$invalid, 'has-success':Form.cooptype.$valid}">
        <label class="control-label" translate="list.cooporationtype">
            Type(s) of project<span class="symbol required"></span>
        </label>
        :<br/>
        <div ng-repeat="topic in list.cooperationtypelist">
            <div > {{topic.item}}</div>
            <ul >
                <li ng-repeat="subitem in topic.subitems">
                    <input type="checkbox" name="cooptype"
                           ng-disabled="checkboxDisable(subitem.key)"
                           ng-model="myModel.cooperationtype[subitem.key]">
                            {{subitem.values | translate}}

                </li>

            </ul>
            <span class="error text-small block" ng-if="Form.cooptype.$dirty && Form.cooptype.$error.required">Field is required.</span>
            <span class="success text-small" ng-if="Form.cooptype.$valid">Done!</span>
        </div>
        </div>
        <div class="form-group" ng-class="{'has-error':Form.cooptypetext.$dirty && Form.cooptypetext.$invalid, 'has-success':Form.cooptypetext.$valid}">
            <p>or type it in yourself:</p>

            <textarea type="text" class="form-control" name="cooptypetext" placeholder="Enter the cooperation type (max of 100 characters)"
                      ng-model="myModel.cooperationtype.coopfreetext"
                      ng-disabled="checkboxDisable('cooptypetext')"
                      ng-minlength=5
                      ng-maxlength=100></textarea>
            <span class="error text-small block" ng-if="Form.cooptypetext.$error.maxlength">Too long!</span>
            <span class="error text-small block" ng-if="Form.cooptypetext.$error.minlength">Too short!</span>
            <span class="success text-small" ng-if="Form.cooptypetext.$valid">Done!</span>
        </div>
    </div>
</form>

这是我控制器中的功能：

$scope.myModel.cooperationtype = {};
$scope.checkboxDisable = function(key) {
    if(!$scope.myModel.cooperationtype[key]) {
        var count = 0;
        Object.keys($scope.myModel.cooperationtype).forEach(function(key) {
            if($scope.myModel.cooperationtype[key]) {
                ++count;
            }
        });

        if(count >= 3) {
            return true;
        }
    }

    return false;
};

Answer 1

除了有效之外，您还要检查以确保字段是脏的，也就是用户输入了一些输入。您还需要使用ng-form，而不是divs

angularjs表单验证显示页面加载成功

1 个答案: