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

Question

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

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

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

Answer 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

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

Reactive Forms: dynamically add and delete to a type string array in Angular 4

javascript

typescript

angular

angular-reactive-forms