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按钮，我想用包括相关的自动完成输入框在内的详细信息填充表单。在其他窗体控件中，除了输入框仅显示“未定义，未定义”之外，我可以获取详细信息。

这就是我将详细信息放入表单的方式

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

所有者的更改等于值。在reactForm中，相对于控件的valueChanges，我更喜欢使用susbcribe。因此，创建表单后

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

注意：我更喜欢sin.this.form.get（'...'）而不是this.form.controls ['...']

如何使角形材料自动完成工作2种方法

1 个答案: