<input cAutocomplete       highlightOptionsOnSearch       allowOnlyDefinedOptions       showHints       [loading]="isPersonsLoading"       [options]="persons"       [search]="{external: true, global: true}"       [delay]="500"       (inputChange)="personsLoad($event)"             formControlName="person"       [valid]="itemForm.controls['person'].touched ? itemForm.controls['person'].valid : undefined" />

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   }) }

itemForm = new FormGroup({  person: new FormControl('', Validators.required)}

this.itemForm.get('person')!.setValue(`${this.item.person?.lastName}, ${this.item.person?.firstName}`)