如何在ReactiveForms中实现多嵌套(by *ngFor) formControl进行验证？

在ReactiveForms中实现多嵌套(by *ngFor) formControl进行验证的过程如下：

创建表单模型：首先，你需要在组件中创建一个表单模型对象，可以使用FormGroup和FormArray来表示嵌套的表单控件结构。FormGroup用于表示一个组的控件集合，FormArray用于表示数组形式的控件集合。
构建模板：在组件的模板中，使用*ngFor指令来迭代嵌套的控件，为每个迭代项创建一个表单控件。使用formGroupName来指定每个嵌套的FormGroup的名称。
表单校验：为每个表单控件添加验证规则。你可以使用Validators提供的内置验证器，也可以自定义验证器。将验证规则应用到对应的表单控件上。
表单提交：在组件中，通过订阅表单的valueChanges事件或使用submit按钮，来处理表单的提交操作。你可以获取表单的值，并进行相应的处理。

以下是一个示例代码，演示了如何在ReactiveForms中实现多嵌套 formControl 进行验证：

<form [formGroup]="myForm" (ngSubmit)="submitForm()">
  <div formArrayName="nestedArray">
    <div *ngFor="let group of nestedArray.controls; let i=index" [formGroupName]="i">
      <input formControlName="controlName" placeholder="Control Name">
      <div *ngIf="myForm.get('nestedArray').get(i.toString()).get('controlName').invalid && myForm.get('nestedArray').get(i.toString()).get('controlName').touched">
        <div *ngIf="myForm.get('nestedArray').get(i.toString()).get('controlName').errors.required">
          Control Name is required.
        </div>
      </div>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  myForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.myForm = new FormGroup({
      nestedArray: new FormArray([
        new FormGroup({
          controlName: new FormControl('', Validators.required)
        }),
        new FormGroup({
          controlName: new FormControl('', Validators.required)
        })
      ])
    });
  }

  submitForm() {
    if (this.myForm.valid) {
      console.log(this.myForm.value);
      // 处理表单提交逻辑
    }
  }
}

在这个示例中，我们使用FormArray来表示嵌套的表单控件。myForm是一个FormGroup，其中包含一个名为nestedArray的FormArray，这个FormArray中包含两个嵌套的FormGroup。每个嵌套的FormGroup都包含一个名为controlName的FormControl，并应用了一个必填的验证规则。

模板中使用了*ngFor来迭代nestedArray.controls，并使用formGroupName来指定每个嵌套的FormGroup的名称。对于每个FormControl，我们添加了一个输入框，并根据其验证状态显示相应的错误信息。

在组件中，我们通过submitForm方法来处理表单的提交操作。如果表单验证通过，我们可以获取表单的值并进行相应的处理。

对于腾讯云相关产品和产品介绍，可以参考腾讯云的官方文档或官方网站。