角FormArray

Question

我无法在13.3角内访问FormArray。它在控制台中显示此错误。我有一个表单组，里面还有两个表单组和一个表单数组。

core.mjs:6485 ERROR Error: Cannot find control with name: 'third'

以下是我的HTML代码：

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <div [formGroup]="bankFormGroup">

    <input type="text" placeholder="property11" formControlName="property11">

    <div *ngIf="bankFormGroup.get('property11')?.invalid && (bankFormGroup.get('property11')?.dirty || bankFormGroup.get('property11')?.touched)" class="alert">

      <div *ngIf="bankFormGroup.get('property11')?.errors?.['required']">
        Required.
      </div>
    </div>

    <div [formGroup]="bankForm2Group">

      <input type="text" placeholder="property21" formControlName="property21">

      <div *ngIf="bankForm2Group.get('property21')?.invalid && (bankForm2Group.get('property21')?.dirty || bankForm2Group.get('property21')?.touched)" class="alert">

        <div *ngIf="bankForm2Group.get('property21')?.errors?.['required']">
          Required.
        </div>
      </div>
    </div>

    <ul class="list-group">

      <li class="list-group-item" formArrayName="third" *ngFor="let product of bankForm3Group.controls; let i = index;">

        <div [formGroupName]="i" class="row">

          <div class="col-4">

            <input type="text" formControlName="property3" class="form-control" id="property3" placeholder="property3">
          </div>
        </div>
      </li>
    </ul>
  </div>

  <div [formGroup]="bankFormGroup">

    <input type="text" placeholder="property12" formControlName="property12">
  </div>

  <button type="submit">Submit</button>
</form>

TS代码：

declare var $: any;
import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
  form!: FormGroup;

  constructor() {
    this.form = new FormGroup({
      first: new FormGroup({
        property11: new FormControl('property 1.1', Validators.required),
        property12: new FormControl('property 1.2', Validators.required)
      }),

      second: new FormGroup({
        property21: new FormControl('property 2.1', Validators.required)
      }),

      third: new FormArray([
        new FormGroup({
          property3: new FormControl('property 3')
        }),
        new FormGroup({
          property3: new FormControl('property 3')
        }),

      ])
    });
  }

  get bankFormGroup(): FormGroup {
    return this.form?.get('first') as FormGroup;
  }

  get bankForm2Group(): FormGroup {
    return this.form?.get('second') as FormGroup;
  }

  get bankForm3Group(): FormArray {
    return this.form?.get('third') as FormArray;
  }

  //get third(): FormArray {
  //  return this.form?.get('third') as FormArray;

  //}

  onSubmit() {
    console.log('Submit', this.form.value);
  }

  ngOnInit(): void {
    $(".preloader").hide();
  }
}

我在TS中有单独的FormGroup，但在HTML嵌套中。我创建了几乎解析的Getter方法。但是我无法通过这个访问FormArray。我花了很多时间但没有运气。提前谢谢。

Answer 1

主要的问题是你的“div”关闭错误。在这个stackblitz中，我订购了您的.html的div。

注1:您可以使用formGroupName="first"和formGroupName="second"而不是[formGroup]="bankFormGroup"和[formGroup]="backForm2Group"

NOTE2:你可以在你的*ngIf中使用form.get('formgroupname.formControlName')的方式。

<div *ngIf="form.get('second.property21')?.invalid>...</div>

注3:我更喜欢formArrayName="third“是在<ul>中而不是<li>中的*ngFor (但这是个人观点)。

NOTE4:对于我来说，在.html中显示输入“Property1.1”(来自formGroup "first")和“Property1.2”(来自formGroup "second")和最后一个输入“Property1.2”(来自formGroup "first")是很奇怪的。

Answer 2

谢谢你，伊丽莎白，我已经达到我的要求了。我使用<ng-container>隔离表单组及其元素。通过这种方法，我不再需要getter方法了。这是我更新的代码

HTML：

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <!--classess removed for clarity-->
  <!--parent div contains first and second group. ng container has been used for each group-->
  <div>

    <!--accessing first group-->
    <ng-container formGroupName="first">
      <input type="text" placeholder="property11" formControlName="property11">

      <div *ngIf="form.get('first.property11')?.invalid && (form.get('first.property11')?.dirty || form.get('first.property11')?.touched)" class="alert">

        <div *ngIf="form.get('first.property11')?.errors?.['required']">
          Required.
        </div>
      </div>
    </ng-container>

    <!--classess removed for clarity-->
    <div>

      <!--accessing second group-->
      <ng-container formGroupName="second">
        <input type="text" placeholder="property21" formControlName="property21">

        <div *ngIf="form.get('second.property21')?.invalid && (form.get('second.property21')?.dirty || form.get('second.property21')?.touched)" class="alert">

          <div *ngIf="form.get('second.property21')?.errors?.['required']">
            Required.
          </div>
        </div>
      </ng-container>
    </div>

    <ul>
      <!--accessing third array-->
      <ng-container formArrayName="third">
        <li *ngFor="let product of third.controls; let i = index;">

          <div [formGroupName]="i">

            <div>

              <input type="text" formControlName="property3" id="property3" placeholder="property3">
            </div>
          </div>
        </li>
      </ng-container>
    </ul>
  </div>

  <!--classess removed for clarity-->
  <div>
    <!--accessing first group back again-->
    <ng-container formGroupName="first">
      <input type="text" placeholder="property12" formControlName="property12">
    </ng-container>
  </div>

  <button type="submit">Submit</button>
</form>

TS代码：

declare var $: any;
import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
  form!: FormGroup;

  constructor() {
    this.form = new FormGroup({
      first: new FormGroup({
        property11: new FormControl('property 1.1', Validators.required),
        property12: new FormControl('property 1.2', Validators.required)
      }),

      second: new FormGroup({
        property21: new FormControl('property 2.1', Validators.required)
      }),

      third: new FormArray([
        new FormGroup({
          property3: new FormControl('property 3')
        }),
        new FormGroup({
          property3: new FormControl('property 3')
        }),

      ])
    });
  }

  get third(): FormArray {
    return this.form?.get('third') as FormArray;
  }

  onSubmit() {
    console.log('Submit', this.form.value);
  }

  ngOnInit(): void {
    $(".preloader").hide();
  }
}

如果有任何改进的余地，请告诉我。我会更新密码。