Недействительное текстовое поле Angular JS

Я пытаюсь сделать текстовые поля недействительными, когда к ним прикасаются и значение пустое, т.е. пользователь пытается ввести какое-то значение из этого поля и удаляет введенные данные. Затем я хотел показать сообщение об ошибке. Я использую приведенный ниже код для достижения этой функции -

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

Он тоже не работает, и действительный всегда становится правдой