如何创建表单组数组

Question

下面是我的JSON对象。我必须为此创建一个反应形式。我应该特别为数组部分做什么？

{
    "examName" : "java",
    "password" : "1234.com",
    "examCategory" : {
        "id" : 78
    },
    "examDetailSet" : 
        [ 
            {
                "questionCategory" : {"id" : 40},
                "section" : {"id" : 7},
                "numberOfQuestions" : 3
            },
            {
                "questionCategory" : {"id" : 41},
                "section" : {"id" : 8},
                "numberOfQuestions" : 6
            }
        ],
    "expiryHours" : 6
}

abc.component.ts

// The formGroup I have created
formdata = this.fb.group({
    examName: ['', Validators.required], password: ['', [Validators.required, Validators.minLength(3)]],
    examCategory: this.fb.group({
      id: [0, Validators.required]
    }),
    examDetailSet: new FormArray([
      new FormGroup({
        questionCategory: this.fb.group({
          id: [0, Validators.required]
        }),
        section: this.fb.group({
          id: [0, Validators.required]
        }),
        numberOfQuestions: new FormControl(['', Validators.required])
      })
    ]),
    expiryHours: [0, Validators.required]
});

abc.component.html

<form [formGroup]="formdata" (submit)="onSubmit()">
  <mat-dialog-content>
    <div class="row">
      <div class="col-md-6">
        <mat-form-field appearance="legacy" class="example-full-width">
          <mat-label>Exam Name</mat-label>
          <input matInput formControlName="examName">
        </mat-form-field>
      </div>
      <div class="col-md-6">
        <mat-form-field appearance="legacy" class="example-full-width">
          <mat-label>Exam Password</mat-label>
          <input matInput [type]="hide ? 'password' : 'text'" formControlName="password">
          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
            [attr.aria-pressed]="hide">
            <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
          </button>
        </mat-form-field>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6" formGroupName="examCategory">
        <mat-form-field appearance="legacy">
          <mat-label>Exam Category</mat-label>
          <mat-select formControlName="id">
            <mat-option *ngFor="let e of ExamCategory" [value]="e.id">{{ e.examCategoryName }}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
    <h2 class="d-flex justify-content-center">Exam Details</h2>
    <span formArrayName="examDetailSet">
      <div class="row">
        <div class="col-md-6" formGroupName="questionCategory">
          <mat-form-field appearance="legacy">
            <mat-label>Question Category</mat-label>
            <mat-select formControlName="id">
              <mat-option *ngFor="let e of QuestionCategory" [value]="e.id">{{ e.questionCategoryName }}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="col-md-6" formGroupName="section">
          <mat-form-field appearance="legacy">
            <mat-label>Section Marks</mat-label>
            <mat-select formControlName="id">
              <mat-option *ngFor="let e of Marks" [value]="e.id">{{ e.marksPerQuestion }}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </span>
    <div class="row">
      <span formArrayName="examDetailSet">
        <div class="col-md-6">
          <mat-form-field appearance="legacy" class="example-full-width">
            <mat-label>Number of Questions</mat-label>
            <input matInput formControlName="numberOfQuestions">
          </mat-form-field>
        </div>
      </span>
      <div class="col-md-6">
        <mat-form-field appearance="legacy" class="example-full-width">
          <mat-label>Expiry Hours</mat-label>
          <input matInput formControlName="expiryHours">
        </mat-form-field>
      </div>
    </div>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button type="submit" mat-flat-button color="primary" mat-dialog-close [disabled]="formdata.invalid">Add</button>
    <button mat-flat-button color="warn" mat-dialog-close>Cancel</button>
  </mat-dialog-actions>
</form>

所以这是我到目前为止编写的代码，但现在它告诉我们找不到带有examDetailSet中路径的控件及其控件。下面是屏幕截图：

我是通过以下答案中给出的链接创建的。请帮帮我。

Answer 1

您可以使用FormArray。就像将一个组中的AbstractControl对象分组的FormGroup一样，FormArray也是一样，但在数组中。

您可以在下面的链接中查看示例-https://netbasal.com/angular-reactive-forms-the-ultimate-guide-to-formarray-3adbe6b0b61a

Answer 2

[拥有FormArray时，不仅需要使用formArrayName，还需要遍历控件，请参见代码中的*ngFor

<span formArrayName="examDetailSet">
  <div class="row" *ngFor="let group of formdata.get('examDetailSet').controls;let i=index"
     [formGroupName]="i">
    <div class="col-md-6" formGroupName="questionCategory">
    ....
</span>

最好为formArray创建吸气剂，以使“类型错误”没有问题

get examDetailArray()
{
    return this.formdata.get('examDetailSet') as FormArray
}

并在* ngFor中使用

  <div class="row" *ngFor="let group of examDetailArray.controls;let i=index"
     [formGroupName]="i">

注意：您也可以使用[formGroup]="group"（组是*ngFor中使用的变量）代替[formGroupName]="i"