Angular FormArray 在 ngOnInit 上返回 null

Question

我有一个子组件，其中有两个FormGroup 。 一个带有简单的 FormControl ，另一个带有FormArray 。 我按照这个stackblitz示例以及许多其他与FormArray相关的示例仍然不知道为什么它不起作用。

自定义条件.ts

  @Input() parentForm: FormGroup;
  customConditions: FormGroup

  ngOnInit() {
    this.initForm()
  }

  initForm(){
    this.customConditions = this.fb.group({
      custom: this.fb.array([])
    });
    this.getCustomArray.push(this.getCustomConditionController())

    this.parentForm.addControl("CustomConditions", this.customConditions);
  }

  get getCustomArray(): FormArray {
    return <FormArray>this.customConditions.get("custom") 
  }

  getCustomConditionController(): FormGroup {
    return this.fb.group({
      ConditionArabic: this.fb.control(""),
      ConditionEnglish: this.fb.control("")
    });
  }

  addCustomConditions() {
    this.getCustomArray.push(this.getCustomConditionController())
  }

  removeCustomConditions(i: number) {
    this.getCustomArray.removeAt(i)
  }

  isLastRow(rowIndex: any) {
    return this.customConditions.controls.length == rowIndex + 1
  }      

自定义条件.html

<div class="row" [formGroup]="customConditions">
    <ng-container formArrayName="custom">
        <div class="col-12" *ngFor="let fg of getCustomArray.controls; let i = index">
            <div class="row mt-3 mb-3" [formGroupName]='fg'>
                <div class="col-4">
                    <div class="form-group">
                        <label for="ConditionEnglish{{i}}" class="control-label">Condition English</label>
                        <input 
                           type="text" 
                           class="form-control" 
                           tabindex="{{i+1}}" 
                           id="ConditionEnglish{{i}}"
                           formControlName="ConditionEnglish" 
                           autocomplete="off" />
                    </div>
                </div>
                <div class="col-4">
                    <div class="form-group">
                        <label for="ConditionArabic{{i}}" class="control-label">Condition Arabic</label>
                        <input 
                           type="text" 
                           name="ConditionArabic" 
                           class="form-control"
                           tabindex="{{i+1}}" 
                           id="ConditionArabic{{i}}"
                           formControlName="ConditionArabic" 
                           autocomplete="off" />
                    </div>
                </div>
                <div class="col-4">
                    <span class="file-add" *ngIf="i > 0">
                      <a (click)="removeCustomConditions(i)"><i class="fal fa-trash-alt"></i></a> 
                    </span>
                    <span class="file-add" *ngIf="isLastRow(i)">
                      <a (click)="addCustomConditions()"><i class="fal fa-plus-circle"></i></a> 
                    </span>
                </div>
            </div>
        </div>
    </ng-container>
</div>

获取错误： ERROR Error: Cannot find control with path: 'custom -> [object Object]' this.customConditions.get("custom")在组件加载后返回空数组，这就是为什么getCustomArray.controls为空所以 html 是不渲染。

我在这里做错了什么？

Answer 1

您的代码中存在语法错误：

  get getCustomArray(): FormArray {
    return= <FormArray>this.customConditions.get("custom") 
  }

固定的：

  get getCustomArray(): FormArray {
    return <FormArray>this.customConditions.get("custom") 
  }

像这样修复它：

<form class="row" [formGroup]="customConditions">
  <ng-container formArrayName="custom">
    <div
      class="col-12"
      [formGroupName]="i"
      *ngFor="let fg of getCustomArray.controls; let i = index"
    >
      <div class="row mt-3 mb-3">
        <div class="col-4">
          <div class="form-group">
            <label for="ConditionEnglish{{ i }}" class="control-label"
              >Condition English</label
            >
            <input
              type="text"
              class="form-control"
              tabindex="{{ i + 1 }}"
              id="ConditionEnglish{{ i }}"
              formControlName="ConditionEnglish"
              autocomplete="off"
            />
          </div>
        </div>
        <div class="col-4">
          <div class="form-group">
            <label for="ConditionArabic{{ i }}" class="control-label"
              >Condition Arabic</label
            >
            <input
              type="text"
              name="ConditionArabic"
              class="form-control"
              tabindex="{{ i + 1 }}"
              id="ConditionArabic{{ i }}"
              formControlName="ConditionArabic"
              autocomplete="off"
            />
          </div>
        </div>
        <div class="col-4">
          <span class="file-add" *ngIf="i > 0">
            <a (click)="removeCustomConditions(i)"
              ><i class="fal fa-trash-alt"></i
            ></a>
          </span>
          <span class="file-add" *ngIf="isLastRow(i)">
            <a (click)="addCustomConditions()"
              ><i class="fal fa-plus-circle"></i
            ></a>
          </span>
        </div>
      </div>
    </div>
  </ng-container>
</form>