Open pAnd0rASBG opened 5 years ago
Just noticed, that ng-invalid actually gets assigned to the parent component element, but not the input
Temporary solution:
[cssClass]="phoneNumber.invalid ? 'form-control form-control-danger' : 'form-control'"
Hi. Same issue here.
@somq Your solution doesn't work with Bootstrap 4. @webcat12345 Please look into this issue.
@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 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
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