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

Posted 2023-05-09

【中文标题】具有 n 个自动完成输入的 Angular 嵌套表单

【英文标题】：Angular nestead form with n autocompletes inputs

【发布时间】：2020-08-30 13:35:40

【问题描述】：

我使用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())
);

感谢大家的帮助。

【问题讨论】：

***.com/questions/61503425/…

【参考方案1】：

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

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

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

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

【讨论】：

你对 ray j，但是用户可以添加和“n”个子元素，那么这需要 n 个自动完成输入到 FormArray 中

获取formArray：form.controls["Children"].controls，并为每个元素：e.controls["Autocomplete"].valueChanges.....