javascript - 对于每个选项不同的选择 [formControl]
问题描述
我正在尝试实现一个创建 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
解决方案
您应该使用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);
}
推荐阅读
- java - 带有退避和重试限制的演员重试
- mongoose - async.await 不能以同步方式工作?
- python - 如何过滤字典列表以仅包含 python 中的几个键?
- angular - Angular 5:APP_INITIALIZER 在每条路线上运行
- vb.net - 内联函数是后台任务吗?
- python - Python 3 - 如何更新字典以在一个键中包含多个值?
- excel - 当多行组合成一个单元格时,VB 脚本中的换行符不起作用
- string - 在 perl 中使用“唯一”时如何从数组中查找“非唯一”值
- python - Keras 损失仅在纪元结束时变为 nan
- c# - AppSettings 值始终为空网络核心