如何在ReactiveForms中实现多嵌套(by *ngFor) 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);
      // 处理表单提交逻辑
    }
  }
}