Как заставить автозаполнение углового материала работать 2 способами

Question

У меня есть поле ввода автозаполнения с использованием Angular Material 7. Я могу получить желаемый результат, когда получу весь список из бэкэнда и свяжу его с источником данных ввода автозаполнения. Я делаю это так:

propertyList: GetProperties[] = null;
selectedProperty: GetProperties = null;

ngOnInit() {
    this.createForm();
    this.getPersons();
}

// CREATING THE FORM
createForm() {
    this.form = new FormGroup({
      propertyName: new FormControl('', [Validators.required]),
      propertyTypeId: new FormControl('', [Validators.required]),
      owner: new FormControl('', [Validators.required]),
      cluster: new FormControl(''),
      propertyNumber: new FormControl(''),
      regionCode: new FormControl(''),
      provinceCode: new FormControl(''),
      municipalCode: new FormControl(''),
      barangayCode: new FormControl(''),
      contactNumber: new FormControl('')
    });
}

// GET THE DATA FROM BACKEND
private getPersons = () => {
    this.personService.getPersons().subscribe((data: Person[]) => {
      this.personList = data;

      this.filteredOptions = this.form.controls['owner'].valueChanges.pipe(
        startWith(''),
        map(value => (typeof value === 'string' ? value : value.lastName)),
        map(name => (name ? this._filter(name) : this.personList.slice()))
      );
    });
};

// DISPLAY RESULT IN THE INPUT BOX FOR AUTOCOMPLETE
displayFn(person?: Person): string | undefined {
    return person ? `${person.lastName}, ${person.firstName}` : undefined;
}

// FILTERING WHAT HAVE BEEN TYPED ON THE INPUT BOX
private _filter(name: string): Person[] {
    const filterValue = name.toLowerCase();

    return this.personList.filter(option => option.lastName.toLowerCase().indexOf(filterValue) === 0);
}

Это в HTML

<mat-form-field>
    <input
      matInput
      type="text"
      placeholder="Property Owner"
      formControlName="owner"
      id="owner"
      [matAutocomplete]="auto"
    />
    <mat-autocomplete
      #auto="matAutocomplete"
      [displayWith]="displayFn"
    >
      <mat-option
        *ngFor="let option of filteredOptions | async"
        [value]="option.personId"
      >
        {{ option.lastName }}, {{ option.firstName }}
      </mat-option>
    </mat-autocomplete>
</mat-form-field>

Это отлично работает. Но если я нажму на кнопку viewinfo, я захочу заполнить свою форму с деталями, включая соответствующее поле ввода автозаполнения. В других моих элементах управления формой я могу получить подробности, за исключением поля ввода, которое просто показывает «undefined, undefined».

Вот как я помещаю детали в форму

onViewInfo(getProperties: GetProperties) {
    this.selectedProperty = getProperties;
    console.log(this.selectedProperty);
    this.commonService.changePropertyId(this.selectedProperty.propertyId);
      this.form.controls['propertyName'].setValue(this.selectedProperty.propertyName),
      this.form.controls['propertyTypeId'].setValue(this.selectedProperty.propertyTypeId),
      this.form.controls['owner'].setValue(this.selectedProperty.owner),
      this.form.controls['cluster'].setValue(this.selectedProperty.cluster),
      this.form.controls['propertyNumber'].setValue(this.selectedProperty.propertyNumber),
      this.form.controls['regionCode'].setValue(this.selectedProperty.regionCode),
      this.form.controls['provinceCode'].setValue(this.selectedProperty.provinceCode),
      this.form.controls['municipalCode'].setValue(this.selectedProperty.municipalCode),
      this.form.controls['barangayCode'].setValue(this.selectedProperty.barangayCode),
      this.form.controls['contactNumber'].setValue(this.selectedProperty.contactNumber)
}

Не могли бы вы показать мне, как это сделать правильно? Спасибо.

Answer 1

При смене владельца равны равные значения. В реактивной форме я предпочитаю susbcribe для valueChanges элемента управления. Итак, после создания формы

createForm() {
    this.form = new FormGroup({
      ...
   });
   ..here..
   this.form.get('owner').valueChanges.subscribe(res=>{
      const person=this.personList.find(x=>x.owner==res)
      if (person)
      {
          this.form.get('propertyName').setValue(person.propertyName)
          this.form.get('propertyTypeId').setValue(person.propertyTypeId)
          ...
      }
}

ПРИМЕЧАНИЕ. Я предпочитаю синтаксис this.form.get ('...'), а не this.form.controls ['...']