Autocomplete Component - Cannot get Reactive Form with existing value work #235
Description
I have the following autocomplete input:
<input cAutocomplete highlightOptionsOnSearch allowOnlyDefinedOptions showHints [loading]="isPersonsLoading" [options]="persons" [search]="{external: true, global: true}" [delay]="500" (inputChange)="personsLoad($event)" id="person" formControlName="person" [valid]="itemForm.controls['person'].touched ? itemForm.controls['person'].valid : undefined" /> persons is a lazy loaded list after (inputChange):
persons: AutocompleteOption[] = []` personsLoad(input: string) { if (!input) { return } this.isPersonsLoading = true let query = new PagedQuery() query.filter = input query.sort = { column: 'LastName' } this.http.get<PagedResult<Person>>('/api/persons', { params: query.toHttpParams() }).subscribe({ next: (result) => { this.persons = result.results.map((person) => <AutocompleteOption>{ label: `${person.lastName}, ${person.firstName}`, value: person.id }) } }).add(() => { this.isPersonsLoading = false }) } The form definition:
itemForm = new FormGroup({ person: new FormControl('', Validators.required) } And the important part, setting the form value initally:
this.itemForm.get('person')!.setValue(`${this.item.person?.lastName}, ${this.item.person?.firstName}`) And now whenever I change the autocomplete input, the list of options is not displayed, but the input resets immediatly to the inital value.
If no initial value is set, the input works as expected.
Metadata
Metadata
Assignees
Labels
No labels