0

I am trying to invalidate text fields when they are touched and value is empty, i.e. user tries to enter some value from this field and deletes the data entered. Then, I wanted to show some error message. I am using below code to achieve this functionality -

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 - event of text box change

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;
}

As it is not setting userNum to invalid, I have tried below - 

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

It is not working either and valid is always coming as true

georgeawg
  • 48,608
  • 13
  • 72
  • 95
ChilBud
  • 185
  • 5
  • 26
  • have you used `vm.userNum.$touched` or `!vm.userNum.$pristine` ? – Rathma Sep 09 '18 at 05:17
  • `ng-required`, `ng-minlength`, `ng-maxlength` all take AngularJS expressions. Especially with `ng-required` using interpolation `{{ }}` will cause problems. – georgeawg Sep 09 '18 at 05:20
  • Thank you for the info on using Interpolation @georgeawg, Apart from that, I was wondering making the input field's valid status to false.. – ChilBud Sep 09 '18 at 08:04
  • [Edit](https://stackoverflow.com/posts/52241160/edit) the question to fix the problems with interpolation, then I will re-open the question if needed. Setting `vm.userNum.required='false'` is sketchy because the string `'false'` is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) in JavaScript. Also I recommend against setting the form controls to the same object name as the form data. In addition, add the `
    ` element with its name so that we can see how its controls connect to the template.
     – georgeawg Sep 09 '18 at 14:37
  • Explain what you are doing with `ng-pattern`. I don't think it is does what you intend. – georgeawg Sep 09 '18 at 14:51

0 Answers0