Angular 如何在提交时保存FormArray字段的值？

我有5个字段MeetingId、TimeId、Date、Start、End，我希望Date Start和End作为FormArray字段。我有正确的添加和删除功能。请有人帮助我如何保存它

我试过用小组形式。成功了。但是表单数组不起作用

<form [formGroup]="scheduleForm" class="scheduleForm">
  <ol>
    <li formArrayName="scheduleFormArray"
        *ngFor="let item of scheduleForm.get('scheduleFormArray').controls; let i=index" [formGroupName]="i">
      <mat-form-field appearance="outline" class="dateField">
        <input matInput [matDatepicker]="picker1" [min]="minDate" placeholder="Datum" formControlName="date">
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
      </mat-form-field>
      <mat-form-field appearance="outline" class="from">
        <input matInput placeholder="von" formControlName="start">
      </mat-form-field>
      <mat-form-field appearance="outline" class="to">
        <input matInput placeholder="bis" formControlName="end">
      </mat-form-field>
      <mat-icon class="cancel" (click)="deleteScheduleColumn(i)">delete</mat-icon>
    </li>
  </ol>
  <mat-icon (click)="addItems()" class="addInput">add_circle</mat-icon>
  <button mat-button class="next" (click)="saveSchedule()">Weiter</button>
</form>

---

My addItems（）和deleteScheduleColumn（）方法有效。请帮助我使用saveSchedule（）方法。

您好，请更新您的saveSchedule方法，如下所示：

public saveSchedule() {
    if (this.scheduleForm.invalid) {
      return;
    } else {
      this.newSchedule.tID = this.scheduleForm.controls['tID'].value;
      this.newSchedule.date = this.scheduleForm.controls['date'].value;
      this.newSchedule.start = this.scheduleForm.controls['start'].value;
      this.newSchedule.end = this.scheduleForm.controls['end'].value;
     this.newSchedule.mID = this.scheduleForm.controls['mID'].value;
      this.timePeriodService.addSchedule(this.newSchedule).subscribe(
        (t: TimePeriod) => {
          let newTimePeriod = this.schedule;
          newTimePeriod.push(t);
          this.schedule = [...newTimePeriod];
        }
      );
    }
  }

---

完成。但是我的SaveSchedule方法是错误的。你知道解决方法吗？请看这个现在你已经修复了表单数组你的问题“请帮我处理saveSchedule（）”无法回答。你的帖子没有包含错误或相关代码。太好了。但我已经在前端和后端都有了一个模型，我应该按照这个模型去做。导出类时间段{构造函数（public mID:number=0，public tID:number=0，public date:Moment，public start:string=''，public end:string=''，）{}。这就是原因，我无法修补。我不能使用像你这样的界面mentioned@Niranjana请显示您得到的错误，以及您在

timePeriodService.addSchedule（）中实现的错误方法

尝试将

date:Moment

更改为

date:date

或

date:string

。错误类型错误：无法在callWithDebugContext的handleEvent（core.js:43992）的Object.eval[as handleEvent]（TryComponent.html:56）处读取TryComponent.saveSchedule（try.component.ts:77）处未定义的属性“value”（core.js:45631）在Object.debugHandleEvent[as handleEvent]（core.js:45646）在dispatchEvent（core.js:29803）在core.js:42924在HTMLButtonElement.（platform browser.js:2668）在ZoneDelegate.invokeTask（zone everyvan.js:391）在Object.onInvokeTask（core.js:39679）上我得到了上面提到的一个错误。它不允许此行中出现控件和值-this.newSchedule.tID=this.scheduleForm.controls['tID'].value；

public saveSchedule() {
    if (this.scheduleForm.invalid) {
      return;
    } else {
      this.newSchedule.tID = this.scheduleForm.controls['tID'].value;
      this.newSchedule.date = this.scheduleForm.controls['date'].value;
      this.newSchedule.start = this.scheduleForm.controls['start'].value;
      this.newSchedule.end = this.scheduleForm.controls['end'].value;
     this.newSchedule.mID = this.scheduleForm.controls['mID'].value;
      this.timePeriodService.addSchedule(this.newSchedule).subscribe(
        (t: TimePeriod) => {
          let newTimePeriod = this.schedule;
          newTimePeriod.push(t);
          this.schedule = [...newTimePeriod];
        }
      );
    }
  }

Thank you all. I have made the below changes and it is now working.

public saveSchedule() {
     if (this.scheduleForm.invalid) {
      return;
    } else {
      this.scheduleFormArray.value.forEach(s => {
        this.newSchedule = new TimePeriod(s.tID, s.date, s.start, s.end, s.mID);
        this.timePeriodService.addSchedule(this.newSchedule).subscribe(
          (t: TimePeriod) => {
            let newTimePeriod = this.schedule;
            newTimePeriod.push(t);
            this.schedule = [...newTimePeriod];
          }
        );
      });
    }
  }