具有 n 个自动完成输入的 Angular 嵌套表单

Question

我使用Angular 9，我有一个这样的嵌套表单：

createFormGroup() {
  return this.formBuilder.group({
    Id: new FormControl(0),
    Name: new FormControl(''),
    Children: this.formBuilder.array([
      this.formBuilder.group({
        Id: new FormControl(0),
        Autocomplete: new FormControl('', [Validators.required])
      })
    ])
  })
}

我需要访问此 n Autocomplete 以订阅事件和显示推荐。

通常我在有一个控件时使用它来访问

this.filteredData = this.myform.controls['Autocomplete'].valueChanges.pipe(
  startWith < string | any > (''),
  map(value => typeof value === 'string' ? value : value.name),
  map(name => name ? this._filter(name) : this.mylist.slice())
);

感谢大家的帮助。

Answer 1

你有嵌套的表单，自动完成在 FormArray 里面，在 FormGroup 里面：

{  
Id: 0
Name: ""
Children: [
  {
   Autocomplete: ""
   Id: 0 }
 ]
}

所以为了获得自动完成表单控件：

let autocompleteFormControl =((form.controls["Children"]).controls[0]).controls["Autocomplete"];
autocompleteFormControl.valueChanges...