FormArray 中的 FormGroup答案

【问题标题】：FormGroup in FormArrayFormArray 中的 FormGroup
【发布时间】：2018-09-03 13:25:24
【问题描述】：

我正在使用 FormArray，然后在其中包含 Form Group，但无法通过 *ngFor 在 html 中访问。我尝试了很多东西，但没有奏效。这是打字稿代码。

  private readonly TRAINING_FORM: any = new FormGroup({
    // new FormControl('', Validators.required)
    codeSchool: new FormControl('', Validators.required),
    adressStreetInst: new FormControl('', Validators.required),
    adressCityInst: new FormControl('', Validators.required),
    adressStateInst: new FormControl('', Validators.required),
    adressZipInst: new FormControl('', Validators.required),
    phoneInst: new FormControl('', Validators.required),
    isProgramInst: new FormControl('', Validators.required),
    faxInst: new FormControl('', Validators.required),
    noteInst: new FormControl('', Validators.required),
    // trainingExtraInformation: new FormArray([])
  });


 ngOnInit() {
    this.loadForm();
  }

  loadForm() {
    const trainingArray = new FormArray([this.TRAINING_FORM]);
    const totalInst = new FormControl('', Validators.required);
    this.trainingForm = new FormGroup({
      totalInst,
      trainingArray
    });
  }

这里是 html ngFor。

 <div formArrayName="trainingArray">
          <div *ngFor="let training of trainings; index as idx" formArrayName="idx">
              <div class="form-group row">
                <label class="col-sm-4 col-form-label">Training institution/hospital name
                  <span class="text-danger">*</span>
                </label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" placeholder="No abbreviations, please"
                         [formControlName]="idx">
                </div>
              </div>
            </div>

【问题讨论】：

标签： angular ngfor angular4-forms formgroups

【解决方案1】：

我可以看到你在这里使用 ngFor

<div *ngFor="let training of trainings; index as idx" formArrayName="idx">

但是您想在哪里访问/显示每个“训练”对象？模板中没有您尝试此操作的部分。

【讨论】：

【解决方案2】：

你忘了给 FormGroup 赋值！！

loadForm() {
    const trainingArray = new FormArray([this.TRAINING_FORM]);
    const totalInst = new FormControl('', Validators.required);
    this.trainingForm = new FormGroup({
      totalInst:totalInst, //<--give value to TotalInst
      trainingArray:trainingArray  //<---idem
    });
}

【讨论】：