Angular 反应形式6

Angular 反应形式6,angular,Angular,我是一个新手 下面是我遇到一些问题的表单的html标记 <form [formGroup]="detailsForm"> <div class="row parent-row" *ngFor="let row of formData;"> <input class="input-lg parent-input-primary" placeholder="{{row.first }} formControlName ={{row.first}}

我是一个新手

下面是我遇到一些问题的表单的html标记

<form [formGroup]="detailsForm">
    <div class="row parent-row" *ngFor="let row of formData;">
        <input class="input-lg parent-input-primary" placeholder="{{row.first }} formControlName ={{row.first}}" />
        <input class="input-lg parent-input-secondary" placeholder="{{row.second }} formControlName ={{row.second}}" />
    </div>
</form>
这里第一个和第二个是动态字符串,在整个表单中是唯一的。 我需要使用如下模块初始化表单:

    detaislForm = FormGroup;
    this.detailsForm = new FormGroup({
        //here I need to write something to init FormControl here, so that angular knows formControls by first and second variables of FormData 
     }
    );
您能给我推荐一种通过此方法在formGroup中插入formcontrols的方法吗?

在此处使用表单数组:

参考资料-->

TS:

HTML:


    detaislForm = FormGroup;
    this.detailsForm = new FormGroup({
        //here I need to write something to init FormControl here, so that angular knows formControls by first and second variables of FormData 
     }
    );
formData: any[] = [
    {
      first: 'business-name',
      second: 'business-type',

    },
    {
      first: 'contact-mobile',
      second: 'purpose',
    }
  ]
  detailsForm: FormGroup;

  constructor(private _fb: FormBuilder) {

  }
  ngOnInit() {

    this.detailsForm = this._fb.group({
      formData: this._fb.array([])
    });

    for (let data of this.formData) {
      this.addValue(data);
    }
  }
  createFormArray(data) {
    return this._fb.group({
      first: data.first,
      second: data.second
    })
  }

  addValue(data) {
    this.getData().push(this.createFormArray(data));
  }
  getData() {
    return this.detailsForm.controls.formData as FormArray
  }
<form [formGroup]="detailsForm">
    <div formArrayName="formData">
        <div *ngFor="let row of detailsForm.get('formData').controls; let i = index;" [formGroupName]="i">
            <input class="input-lg parent-input-primary" placeholder="first" formControlName="first" />
            <input class="input-lg parent-input-secondary" placeholder="second" formControlName="second" />
        </div>
    </div>
</form>