我开始在我的angular项目中使用React式表单来制作一个简单的表单，帮助我添加员工在他/这里一天的工作时间，并添加休息时间表单：以及：可以在每个工作日增加一次或两次或两次以上的休息。我面临的问题是，我不能绑定数据从中断控件。
在.ts文件中

export class AddAppointmentFormComponent implements OnInit{
  addAppointmentForm!: FormGroup
  constructor(private _fb:FormBuilder, private _wfmService:WFMService) {}
 ngOnInit(): void {
    this.addAppointmentForm = this._fb.group({
      typeOfDayId :['',Validators.required],
      appointMentDate: ['', Validators.required],
      from: ['', Validators.required],
      to: ['', Validators.required],
      breaks: this._fb.array([
      ]),

    })
  }

  get breaks(){
    return this.addAppointmentForm.get('breaks') as FormArray;
  }

  addBreak(){
    this.breaks.push(this._fb.group({
      from: ['', Validators.required],
      to: ['', Validators.required],
    }))
  }

  removeBreak(i:any){
    this.breaks.removeAt(i);
  }
}

在.html文件中

<div mat-dialog-content [align]="'start'">
  <h4 mat-dialog-title style="text-align: center;">Add New Appointment</h4>
  {{ addAppointmentForm.value | json }}
  <form [formGroup]="addAppointmentForm">

    <div class="mb-3">

      <label for="name" class="form-label">Date</label>
      <input class="form-control" name="name" type="date" required formControlName="appointMentDate">
    </div>
    <div class="mb-3">
      <label for="" class="form-label">Type Of Day</label>
      <select class="form-select" name="dep" class="form-control" formControlName="typeOfDayId">
        <option value="">Select Type...</option>
        <option *ngFor="let type of typesOfDay" [value]="type.id">{{type.typeName}}</option>
      </select>
    </div>

    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" [value]="" (change)="onCheckChange($event)">
        <label class="form-check-label">
          All Day
        </label>
      </div>
    </div>

    <div class="row">
      <div class="col-6">
        <div class="form-group">
          <label>From</label>
          <input type="time" class="form-control" formControlName="from" [readOnly]="addBreakBtn">
        </div>
      </div>
      <div class="col-6">
        <div class="form-group">
          <label>To</label>
          <input type="time" class="form-control" formControlName="to" [readOnly]="addBreakBtn">
        </div>
      </div>
    </div>

    <button class="btn btn-success btn-sm" (click)="addBreak()" [disabled]="addBreakBtn">add break</button>

    <div formArrayName="breaks" class="row mt-3" *ngFor="let break of breaks.controls; let i=index;">
      <div class="col">
        <div class="form-group">
          <label for="break">Break({{i+1}}) From</label>
          <input type="time" class="form-control" [formControlName]="i">
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label for="break">Break({{i+1}}) To</label>
          <input type="time" class="form-control" [formControlName]="i">
        </div>
      </div>
      <div class="col">
        <div class="form-group mt-2">
          <button type="submit" (click)="removeBreak(i)" class="btn btn-danger mt-4">Remove</button>

        </div>
      </div>
    </div>

  </form>

  <div class="btn__actions">
    <button class="btn btn-danger" mat-dialog-close>Close</button>
    <button style="margin-left:10px ;" class="btn btn-primary">Create</button>

  </div>

</div>

我需要{{ addAppointmentForm.value | json }}“breaks”的输出：[ {“from”：“10：00”，“到”：“10：30”}，{“from”：“14：00”，“到”：“14：30”} ]