Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NgbTypeahead required validation with reactive form works incorrectly

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

3reactions

robeverettcommented, Nov 7, 2018

here plunkr working demo http://plnkr.co/edit/42AB4yXBsiuGDuFCC0C5

OMG - I’ve been looking for this functionality for weeks - hopefully I can get this to work with ngbTypeahead in Angular 7.0.2 !?

1reaction

vladimir-shirmanovcommented, Sep 18, 2018

here plunkr working demo http://plnkr.co/edit/42AB4yXBsiuGDuFCC0C5

Top Results From Across the Web

ng bootstrap typeahead not working with angular reactive form

the problem is that when search function is declared, "instance is undefined". This happens e.g. if we has some like <div *ngIf="form" ...

NgbTypeahead required validation with reactive form works ...

Bug description: In markup I have this code <div class="first-group-margin form-group"> <label for="recipient">{{ 'To' | translate }}: ...

Ng Bootstrap Typeahead Not Working With Angular Reactive ...

NgbTypeahead required validation with reactive form works incorrectly #2719 <div classfirstgroupmargin formgroup> <label.

Typeahead - Angular powered Bootstrap

A directive providing a simple way of creating powerful typeaheads from any text input. Selector: 'input[ngbTypeahead]'. Exported as: 'ngbTypeahead'. Inputs ...

Angular Custom Form Controls with Reactive Forms and ...

We can see our custom app-switch works seamlessly with the Reactive Forms/Form Builder API just like any other text input.