如何在 FormArray（响应式表单）中使用 mat-autocomplete（Angular Material Autocomplete）

Question

假设我有以下表单结构：

  this.myForm = this.formBuilder.group({
          date: ['', [Validators.required]],
          notes: [''],
          items: this.initItems()

        });
  initItems() {
    var formArray = this.formBuilder.array([]);
    for (let i = 0; i < 2; i++) {
      formArray.push(this.formBuilder.group({
        name: ['', [Validators.required]],
        age: ['', [Validators.required]],
      }));
    }

    return formArray;
  }

并且名称控件应该是自动完成的，我怎样才能将所有名称控件与自动完成列表相关联？

Answer 1

我通过将 FormArray 中的每个 name 控件关联到 filteredOption 数组来解决这个问题：

  ManageNameControl(index: number) {
    var arrayControl = this.myForm.get('items') as FormArray;
    this.filteredOptions[index] = arrayControl.at(index).get('name').valueChanges
      .pipe(
      startWith<string | User>(''),
      map(value => typeof value === 'string' ? value : value.name),
      map(name => name ? this._filter(name) : this.options.slice())
      );

  }

然后每次我在 form Array 中构建一个 formgroup （创建新项目）后，我需要在新索引处调用上述函数，如下所示：

  addNewItem() {
    const controls = <FormArray>this.myForm.controls['items'];
    let formGroup = this.formBuilder.group({
      name: ['', [Validators.required]],
      age: ['', [Validators.required]],
    });
    controls.push(formGroup);
    // Build the account Auto Complete values
    this.ManageNameControl(controls.length - 1);

  }

在 .html 文件中，我们需要引用所需的 filteredOption 数组，我们可以使用 i 索引：

  <mat-option *ngFor="let option of filteredOptions[i] | async " [value]="option">
  {{ option.name }}
  </mat-option>

请在此处查看详细答案https://stackblitz.com/edit/angular-szxkme?file=app%2Fautocomplete-display-example.ts

更新：要使用特定对象的默认值填充数组，您可以使用这样的接收表单来完成：

 let formGroup = this.fb.group({
      name: [{value: { name: 'Mary' } , disabled: false}, [Validators.required]],
      age: ['', [Validators.required]],
    });

stackblitz

如何在 FormArray（响应式表单）中使用 mat-autocomplete（Angular Material Autocomplete）

How to use mat-autocomplete (Angular Material Autocomplete) inside FormArray (Reactive Forms)

angular-material

angular

angular6