在添加新的表单输入字段时，Angular 2+保留表单数组的值。

Question

StackBlitz链接

当我试图在表单数组中添加新的表单输入时，整个表单被清空并添加了一个新的输入字段。

HTML

<form [formGroup]="arrayForm" (ngSubmit)="onSubmitArrayForm()">
<div formArrayName="dataInForm">
 <div *ngFor="let item of arrayForm.get('dataInForm')['controls']; let i = index" [formGroupName]="i">
   <input type="text" formControlName="randomNameFCN" name="someName">
  </div>
  <button type="submit">Submit</button>
 </div>
 <button type="button" (click)="addArrayFormField1()">Add Form Field Type 1</button>
 <button type="button" (click)="addArrayFormField2()">Add Form Field Type 2</button>
</form>
{{arrayForm.value | json}}

.TS

export class ArrayFormComponent implements OnInit {

  constructor(
    private fb: FormBuilder
  ) { }
  randomData: any[] = [
    { id: 1, name: 'Sharpe', value: 37, },
    { id: 2, name: 'And', value: 45, },
    { id: 3, name: 'The', value: -12, }
  ];
  arrayForm: FormGroup;
  dataInFormElement: FormGroup;

  ngOnInit(): void {
    this.arrayForm = this.fb.group({
      dataInForm: this.fb.array([])
    })
    this.setValues(this.randomData);
  }

  setValues(data){
    const dataInFormControl = <FormArray>this.arrayForm.get('dataInForm')['controls'];
    data.forEach(element => {
      this.dataInFormElement = this.fb.group({
        randomNameFCN: [{value: element.name, disabled: true}]
      })
      dataInFormControl.push(this.dataInFormElement);
    }) 
  }
  addArrayFormField1(){
    const dataInFormControl = <FormArray>this.arrayForm.controls['dataInForm'];
    dataInFormControl.push(this.fb.group({
      randomNameFCN: [{ value: '', disabled: false }]
    }))
  }
  addArrayFormField2(){
    const dataInFormControl = <FormArray>this.arrayForm.get('dataInForm')['controls'];
    dataInFormControl.push(this.fb.group({
      randomNameFCN: [{ value: '', disabled: false }]
    }))
  }
  onSubmitArrayForm(){
    console.log(this.arrayForm);
  }
}

在初始加载时，json输出 {{arrayForm.value | json}} 显示

{ "dataInForm": [ 
 { "randomNameFCN": "Sharpe" }, 
 { "randomNameFCN": "And" }, 
 { "randomNameFCN": "The" } ] }

这是好的。这就是我想要的，但当我点击了 addArrayFormField1() 按钮。arrayForm 被清空，json输出显示 { "dataInForm": [ { "randomNameFCN": "" } ] } 而在点击 addArrayFormField2() 按钮。arrayForm 不添加任何值，而且json输出只显示旧值。

我想要的是当我提交表单时，它应该将其添加到当前的 dataForm 并应显示

{ "dataInForm": [ 
 { "randomNameFCN": "Sharpe" }, 
 { "randomNameFCN": "And" }, 
 { "randomNameFCN": "The" },
 { "randomNameFCN": "NewName1" },
 { "randomNameFCN": "NewName2" },
 ] }

如何做到这一点？又有什么不同？addArrayFormField1() 和 addArrayFormField2()?

请参考 StackBlitz链接 来直观地看到它。

Answer 1

声明dataInFormControl为全局

dataInFormControl : FormArray

每当你这样做

dataInFormControl  = <FormArray>this.arrayForm.get('dataInForm')

你创建一个新的FormArray

  setValues(data){
    this.dataInFormControl  = <FormArray>this.arrayForm.get('dataInForm')['controls'];
    data.forEach(element => {
      this.dataInFormElement = this.fb.group({
        randomNameFCN: [{value: element.name, disabled: true}]
      })
      this.dataInFormControl.push(this.dataInFormElement);
    }) 
  }
  addArrayFormField1(){

   this.dataInFormControl.push(this.fb.group({
      randomNameFCN: [{ value: '', disabled: false }]
    }))

  }
  addArrayFormField2(){
    this.dataInFormControl.push(this.fb.group({
      randomNameFCN: [{ value: '', disabled: false }]
    }))
  }