如何从主零部件重置子零部件中的字段- angular

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

@Component({
  selector: 'app-reset-fields',
  templateUrl: './reset-fields.component.html',
  styleUrls: ['./reset-fields.component.css']
})
export class ResetFieldsComponent {
  // 定义表单对象
  form: FormGroup;

  constructor() {
    // 创建表单对象和表单控件
    this.form = new FormGroup({
      field1: new FormControl('初始值1'),
      field2: new FormControl('初始值2'),
      field3: new FormControl('初始值3')
    });
  }

  // 重置子零部件中的字段
  resetFields() {
    this.form.reset(); // 调用reset方法重置表单控件的值
  }
}

<form [formGroup]="form">
  <label>
    字段1：
    <input type="text" formControlName="field1">
  </label>
  <br>
  <label>
    字段2：
    <input type="text" formControlName="field2">
  </label>
  <br>
  <label>
    字段3：
    <input type="text" formControlName="field3">
  </label>
  <br>
  <button (click)="resetFields()">重置字段</button>
</form>