对于每个选项不同的选择 [formControl]

Question

我正在尝试实现一个创建 mat-form-field 的按钮

days = new FormControl();
daysList: string[] = ['Monday', 'Thuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];


openExecutionTimeScheduler() {
  let now = new Date();

  this.weekDayAndTime.weekDay = []

  var weekday = new Array(7);
  weekday[0] = "Sunday";
  weekday[1] = "Monday";
  weekday[2] = "Tuesday";
  weekday[3] = "Wednesday";
  weekday[4] = "Thursday";
  weekday[5] = "Friday";
  weekday[6] = "Saturday";
  this.weekDayAndTime.weekDay.push(weekday[now.getDay()])
  this.days.setValue(this.weekDayAndTime.weekDay)
}

<div style="display:flex; flex-direction:row" class="m-portlet__body" *ngFor="let time of times; let i = index;">

  <mat-form-field appearance="outline">
    <mat-label>Days Of Week</mat-label>
    <mat-select [formControl]="days" multiple>
      <mat-option *ngFor="let day of daysList" [value]="day">{{day}}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

当我创建一个新项目时，它会覆盖已选择的字段并将工作日设置为今天的工作日。如何使项目彼此独立？因此，如果我创建一个 mat-form-field，它会预先选择今天作为默认日期，如果我选择另一天，它不会覆盖以前的 mat-form-fields

Answer 1

您应该使用FormArray。

例子

<ng-container formArrayName="days">
  <ng-container *ngFor="let daysForm of days.controls; let i = index">
      <div class="days-form-row" [formGroup]="daysForm">
        <mat-form-field appearance="outline">
          <mat-label>Days Of Week</mat-label>
          <mat-select [formControl]="weekday" multiple>
            <mat-option *ngFor="let day of daysList" [value]="day">{{day}}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
  </ng-container>
</ng-container>

表单设置

form = this.fb.group({
  // other form controls,
  days: this.fb.array([])
});

constructor(private fb:FormBuilder) {}

get days() {
  return this.form.controls["days"] as FormArray;
}

添加课程

addDayControl() {
  const dayForm = this.fb.group({
    weekday: ['Sunday', Validators.required]
  });
  this.days.push(dayForm);
}