Validation css class incorrect

[pAnd0rASBG]

trafficstars

Upon entering an incorrect/incomplete Phone number (e.g. just country code), .errors correctly reflects { "validatePhoneNumber": { "valid": false } } but the actual input has class="form-control ng-valid ng-touched ng-dirty".

Expected behavior:

"ng-valid" should be "ng-invalid"

Details:

in component: this.details = fb.group({ phone: [undefined, [Validators.required]] });

in template: <ngx-intl-tel-input [preferredCountries]="['au', 'us', 'gb', 'de']" [enablePlaceholder]="true" [enableAutoCountrySelect]="true" name="phone" id="phone" formControlName="phone"></ngx-intl-tel-input>

classes on load (empty): form-control ng-untouched ng-pristine ng-valid classes on touch (empty): form-control ng-pristine ng-valid ng-touched classes on invalid value: form-control ng-valid ng-touched ng-dirty classes on valid value: form-control ng-valid ng-touched ng-dirty

[pAnd0rASBG]

Just noticed, that ng-invalid actually gets assigned to the parent component element, but not the input

[somq]

Temporary solution:

[cssClass]="phoneNumber.invalid ? 'form-control form-control-danger' : 'form-control'"

[iradovanovic]

Hi. Same issue here.

[vishnu-dev]

@somq Your solution doesn't work with Bootstrap 4. @webcat12345 Please look into this issue.

[pasevin]

@vishnu-dev, @webcat12345 was not active on this repo for a very long time. I'm the only active maintainer.

I Will see what can be done at some point, but if someone can look at it, I will be glad to merge the PR.

[somq]

@somq Your solution doesn't work with Bootstrap 4. @webcat12345 Please look into this issue.

@vishnu-dev Did you try to investigate the new BS4 class for validation?

Try replacing form-control-danger by was-validated