Posted in Uncategorized

NgbTypeahead required validation with reactive form works incorrectly

   February 25, 2021  1 Comment on NgbTypeahead required validation with reactive form works incorrectly

Bug description:

In markup I have this code

<div class="first-group-margin form-group">
      <label for="recipient">{{ 'To' | translate }}:</label>
      <input id="recipient" type="text" class="tatoo-form-control" name="recipient" [ngbTypeahead]="search"
        [resultFormatter]="autocompleteFormatter" [inputFormatter]="autocompleteFormatter" [class.is-invalid]="recipient.invalid && recipient.touched"
        formControlName="recipient" [editable]="false" placeholder="{{ 'Placeholder.UserRecipient' | translate }}"
        autocomplete="false" (selectItem)="changeEvent($event)">
      <div class="alert-absolute alert alert-danger mt-2" *ngIf="recipient.touched && recipient.invalid">
        <span *ngIf="recipient.errors['required']">{{'Validation.BlankRecipient' | translate}}</span>
      </div>
</div>

and when I select value from dropdown the input field is ‘blinking red’ because change event occures earlier then typeahead select item event I think. So my form control become invalid for a while

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 6.0.2

ng-bootstrap: 2.0.0

Bootstrap: 4.1.1

Full dicussion on github.com

1 possible answer(s) on “NgbTypeahead required validation with reactive form works incorrectly”