angular - 无法在 Angular 中获取先前检查的表单值

Question

更新表单时，我的 meetupform.controls.day 数组未保存之前检查的值

app.component.html

<div *ngIf="meetupForm.controls.recurring.value==='weekly'">
    <mat-checkbox (change)="onDayChange(day, $event.checked)" *ngFor="let day of days" class="margin-lr" [checked]="isClassDay(day)">{{day}}</mat-checkbox>
  </div>

app.component.ts

onDayChange(day: string, isChecked: boolean) {
const dayFormArray = <FormArray>this.meetupForm.controls.day;
if (isChecked) {
  // add to day array if checked
  dayFormArray.push(new FormControl(day));
} else {
  // remove from day array if unchecked
  const index = dayFormArray.controls.findIndex(x => x.value === day);
  dayFormArray.removeAt(index);
}

}

标签： angulartypescriptangular-forms

Answer 1

每次更改检查值时，您都在创建数组的新实例：

onDayChange(day: string, isChecked: boolean) {
   const dayFormArray = <FormArray>this.meetupForm.controls.day;
   ...
}

您需要创建dayFormArray组件的属性以保留该值。

private dayFormArray: FormArray;

ngOninit(){
   this.dayFormArray = = <FormArray>this.meetupForm.controls.day;
}

onDayChange(day: string, isChecked: boolean) {
   if (isChecked) {
     // add to day array if checked
     this.dayFormArray.push(new FormControl(day));
   } else {
     // remove from day array if unchecked
     const index = this.dayFormArray.controls.findIndex(x => x.value === day);
     this.dayFormArray.removeAt(index);
   }
}