angular中的嵌套表单验证

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-nested-form',
  templateUrl: './nested-form.component.html',
  styleUrls: ['./nested-form.component.css']
})
export class NestedFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      address: this.fb.group({
        street: ['', Validators.required],
        city: ['', Validators.required],
        zip: ['', Validators.required]
      })
    });
  }

  onSubmit() {
    if (this.form.valid) {
      console.log('Form submitted:', this.form.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input id="name" formControlName="name">
    <div *ngIf="form.get('name').invalid && (form.get('name').dirty || form.get('name').touched)">
      <div *ngIf="form.get('name').errors?.required">Name is required</div>
    </div>
  </div>
  <div formGroupName="address">
    <label for="street">Street:</label>
    <input id="street" formControlName="street">
    <div *ngIf="form.get('address.street').invalid && (form.get('address.street').dirty || form.get('address.street').touched)">
      <div *ngIf="form.get('address.street').errors?.required">Street is required</div>
    </div>
    <label for="city">City:</label>
    <input id="city" formControlName="city">
    <div *ngIf="form.get('address.city').invalid && (form.get('address.city').dirty || form.get('address.city').touched)">
      <div *ngIf="form.get('address.city').errors?.required">City is required</div>
    </div>
    <label for="zip">Zip:</label>
    <input id="zip" formControlName="zip">
    <div *ngIf="form.get('address.zip').invalid && (form.get('address.zip').dirty || form.get('address.zip').touched)">
      <div *ngIf="form.get('address.zip').errors?.required">Zip is required</div>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>