Question

当文本字段被触摸并且值是空时，我试图使文本字段无效，即用户尝试从该字段中输入一些值并删除输入的数据。然后，我想显示一些错误消息。我正在使用以下代码来实现此功能-

html

<div class='form-control'>
    <input type='text'
           ng-pattern=vm.userNum.pattern
           id={{vm.userNum.fieldName}}
           name={{vm.userNum.fieldName}}
           ng-model='vm.userNum.newValue'
           minlength={{vm.userNum.minlength}}
           ng-minlength={{vm.userNum.minlength}}
           maxlength={{vm.userNum.maxlength}}
           ng-required={{vm.userNum.required}}
           ng-maxlength={{vm.userNum.maxlength}}
           ng-change="vm.userNumSetRequired()"
    />
    <div class="input-icons">
        <i class="fa fa-check form-control-feedback" ng-show="(!vm.userNumReqErr && vm.userNum.$dirty && vm.userNum.$valid)" aria-hidden="true"></i>
        <i class="fa fa-exclamation-triangle form-control-feedback" aria-hidden="true" ng-show="vm.userNumReqErr || (vm.userNum.$dirty && vm.userNum.$invalid) || (vm.userNum.$invalid && vm.$submitted)"></i>
    </div>

    <div id="errorFieldMessageuserNum" aria-live="polite" class="errorFieldMessage" ng-show="(vm.userNumReqErr) || (vm.userNum.$dirty && vm.userNum.$invalid) || (vm.userNum.$invalid && vm.$submitted)">
        <div id="userNumRequired" ng-show="vm.userNum.$error.required">Required</div>
        <div id="userNumMinRequired" ng-show="vm.userNum.$error.minlength">min length error</div>
        <div id="userNumMaxRequired" ng-show="vm.userNum.$error.maxlength">max length error</div>
        <div id="userNumPattern" ng-show="vm.userNum.$error.pattern">pattern error</div>
        <div id="userNumRequired1" ng-show="vm.userNum.error">This field is required </div>
    </div>
</div>

JS-文本框更改事件

vm.userNum = {};
vm.userNum.displayName = 'User Number';
vm.userNum.fieldName = 'userNum';
vm.userNum.minlength = 1;
vm.userNum.maxlength = 8;
vm.userNum.required = 'false';
vm.userNum.pattern = allowedNumeric;
vm.userNum.patternError = allowedNumericError;

if (vm.userNum.newValue == undefined || vm.userNum.newValue == '')) {
    vm.userNum.invalid = 'true';
    vm.userNum.error = 'true';
    vm.userNumReqErr = true;
}

因为它没有将userNum设置为无效，所以我在下面尝试过-

vm.userNum.$setValidity("invalid", true);

它也不起作用，有效总是如真

无效的文本字段Angular JS

0 个答案: