Question

我有两个下拉列表，我正在应用角度形式验证。

    <form name="newForm" data-ng-submit="save(newForm.$valid)" novalidate="novalidate">
        <select ng-model="val.selectOne" name="selectOne" ng-change="setValidation(val.selectOne)" data-ng-class="{ 'error': newForm.selectOne.$dirty && newForm.selectOne.$invalid }" required="required">
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
        </select>
           <div data-ng-messages="newForm.selectOne.$error" data-ng-show="newForm.selectOne.$touched || newForm.$submitted">
             <div class="error-message" data-ng-message="required">Please enter value</div>
           </div>
        <select ng-model="val.selectTwo" name="selectTwo" data-ng-class="{ 'error': newForm.selectTwo.$dirty && newForm.selectTwo.$invalid }" required="required">
            <option>Val1</option>
            <option>Val2</option>
            <option>Val3</option>
        </select>
            <div data-ng-messages="newForm.selectTwo.$error" data-ng-show="newForm.selectTwo.$touched || newForm.$submitted">
               <div class="error-message" data-ng-message="required">Please enter value</div>
            </div>

       <button type="submit">Save</button>
    </form>

我想要的是当用户选择选项C和D时我不希望我的第二个下拉列表在保存时验证。在我的指令代码中： -

scope.setValidation = function (value){
    if (value == "C" || value == "D") {
        scope.newForm.selectTwo.$invalid = true;
        scope.newForm.selectTwo.$touched = true;
        scope.newForm.selectTwo.$dirty = true;
    }
}

我正在尝试为C和D设置验证状态为true，但这不起作用。任何人都可以告诉我任何有效的方法。

Answer 1

您可以为此创建一个自定义指令，您可以在其中检查用户是否选择了＆＃39; c＆＃39;或者＆＃39; d＆＃39;并相应地验证。请为您的选择选项提供值属性。请看下面的代码。

<form name="newForm" data-ng-submit="newForm.$valid && save(newForm.$valid)" novalidate="novalidate">
    <select ng-model="val.selectOne" name="selectOne" data-ng-class="{ 'error': newForm.selectOne.$dirty && newForm.selectOne.$invalid }" required="required">
        <option value="A" >A</option>
        <option value="B" >B</option>
        <option value="C" >C</option>
        <option value="D" >D</option>
        <option value="E" >E</option>
    </select>
       <div data-ng-messages="newForm.selectOne.$error" data-ng-show="newForm.selectOne.$touched || newForm.$submitted">
         <div class="error-message" data-ng-message="required">Please enter value</div>
       </div>
    <select custom="{{val.selectOne}}" ng-model="val.selectTwo" name="selectTwo" data-ng-class="{ 'error': newForm.selectTwo.$dirty && newForm.selectTwo.$invalid }" required="required">
        <option value="Val1">Val1</option>
        <option value="Val2">Val2</option>
        <option value="Val3">Val3</option>
    </select>
        <div data-ng-messages="newForm.selectTwo.$error" data-ng-show="newForm.selectTwo.$touched || newForm.$submitted">
           <div class="error-message" data-ng-message="required">Please enter value</div>
        </div>
<div ng-if="newForm.selectTwo.$error.someerror && newForm.$submitted" >
       <div class="error-message" data-ng-message="required">Please dont select 'C' or 'D'</div>
    </div>



   <button type="submit">Save</button>
</form>


app.directive("custom", [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attr, ctrl) {
        function customValidator(ngModelValue) {
            var limit = attr.custom;
            if (limit !='C' && limit != 'D') {
                ctrl.$setValidity('someerror', true);
            } else {
                ctrl.$setValidity('someerror', false);
            }


            return ngModelValue;
        }
        ctrl.$parsers.push(customValidator);

    }
  }
 }]);

如果用户选择“C＆＃39;”，则会显示错误。或者＆＃39; D＆＃39;从第一个选择框中提交表单。

如何在另一个下拉值

1 个答案: