时间戳

首页 > 解决方案 > Angular 11 - 验证在 for 循环中生成的子表单

angular - Angular 11 - 验证在 for 循环中生成的子表单

问题描述

我正在使用 Angular Reactive 表单。我的父组件有一个表单，一个Add Form. Submit和Reset按钮。当我单击Add form它时，它会添加一个名为profile-formDOM 的子表单。有profile-form两个字段First Name和Email。这个想法是多次重用profile-form组件，单击添加按钮。每个表单都需要验证，并且父表单应该知道每个子表单的验证状态。

我的父表单具有此 HTML 以在 for 循环中生成子表单。

<div *ngFor="let fg of formList.controls; let infoIndex = index">
    <app-profile-form formControlName="fg" [formList]="formList" 
                      [formIndex]="infoIndex"></app-profile-form>
  </div>

当我查看控制台时，我似乎收到了一个formControlName 'fg'在formList.controls. 如何修复我的父表单和子表单之间的 formControls 映射，以便验证有效？

堆栈闪电战在这里

标签： angulartypescriptangular-reactive-formscontrolvalueaccessor

解决方案

让我们试着分析一下表格。

您期望以下作为表单的最终值

{
  "formList": [  
    {
      "firstName": "",
      "email": ""
    },
    {
      "firstName": "",
      "email": ""
    },
    {
      "firstName": "",
      "email": ""
    }
  ]
}

在上面我们有

form  => FormGroup : form 
  formList => FormArray : formList 
    1 => FormControl with value {email: '', firstName} : 1
    2 => FormControl with value {email: '', firstName} : 2
    3 => FormControl with value {email: '', firstName} : 3

所以在表单中我们必须有这个结构才能让表单工作

<form [formGroup]="signupForm" (ngSubmit)="submit()">
  <ng-container formArrayName='formList'>
    <div *ngFor="let fg of formList.controls; let infoIndex = index">
      <app-profile-form [formControlName]="infoIndex" [formIndex]="infoIndex"></app-profile-form>
    </div>
  </ng-container>

  <button>Sign Up</button>
  <button type="button" (click)="resetForm()">Reset</button>
</form>

其他一些修改将包括

改变formListGroupDef

    return this.formBuilder.control(
      {
        firstName: "",
        email: ""
      },
      Validators.required
    );

注册表单

    this.signupForm = this.formBuilder.group({
      formList: this.formBuilder.array([
        this.formListGroupDef()
      ])
    });

我还对您的内容进行了一些更改ProfileFormComponent

export class ProfileFormComponent implements ControlValueAccessor, OnDestroy {
  @Input() formIndex: any;
  destroyed$ = new Subject<any>();
  form: FormGroup;
  get firstNameControl() {
    return this.form.controls.firstName;
  }

  get emailControl() {
    return this.form.controls.email;
  }

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      firstName: ["", Validators.required],
      email: ["", Validators.required]
    });

    this.form.valueChanges.pipe(
      filter(({firstName, email}) => firstName.length > 0 || email.length > 0 ),
      takeUntil(this.destroyed$)
    ).subscribe(value => {
      this.onChange(value);
      this.onTouched();
    });
  }

  ngOnDestroy() {
    this.destroyed$.next();
  }

  onChange: any = () => {};
  onTouched: any = () => {};

  registerOnChange(fn) {
    this.onChange = fn;
  }

  writeValue(value) {
    if (value) {
      this.form.patchValue(value);
    }
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

  validate(_: FormControl) {
    return this.form.valid ? null : { profile: { valid: false } };
  }

看演示

推荐阅读