Reactive Forms：在Angular 4中动态添加和删除类型字符串数组答案

【问题标题】：Reactive Forms: dynamically add and delete to a type string array in Angular 4Reactive Forms：在Angular 4中动态添加和删除类型字符串数组
【发布时间】：2018-10-12 12:37:07
【问题描述】：

如何将字段添加到可以动态添加和删除类型字符串数组的反应式表单？我现在的实现是一个 FormArray，但是它作为一个对象添加到数组中，而不是数组中的另一个字符串。（见下面的代码）

ngOnInit() {
  this.form = this.formBuilder.group({
    user: '',
    directory: '',
    filename: this.formBuilder.array([ this.createItem() ])
  });
}

createItem(): FormGroup {
  return this.formBuilder.group({
    filename: ''
  });
}

【问题讨论】：

您需要将表单定义为类变量才能在任何地方访问它！
@Exterminator 它是在我刚刚没有包含在 sn-p 中的代码中声明的。它可以工作，但我在问如何实现将数组作为字符串而不是对象添加。
看看这个Reactive Forms in Angular: Dynamically Creating Form Fields With FormArray
@Exterminator 是我现在使用的参考。有没有办法直接将输入添加到数组而不是为 FormArray 创建表单组？
是的，您可以创建模板驱动的表单而不是响应式表单

标签： javascript angular typescript angular-reactive-forms

【解决方案1】：

你可以试试这个，而不是创建 formGroup

constructor(private formBuilder:FormBuilder){
   this.form = this.formBuilder.group({
    user: '',
    directory: '',
    filename: new FormArray([new FormControl('hai')])
  });

 }

 addFormInput(){
    const form=new FormControl('');
   (<FormArray>this.form.controls['filename']).push(form);
  }

removeFormInput(i){
  (<FormArray>this.form.get('filename')).removeAt(i);
 }

例如：https://stackblitz.com/edit/angular-tvuksw

【讨论】：