Validation css class incorrect

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

[somq]

Temporary solution:

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

[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