Angular 响应式表单:如何填充 Multi-Selection 复选框表单?
Angular Reactive Forms: How to Populate A Multi-Selection Checkbox form?
如何在 "Edit Mode" 中填充表单组的复选框?
我正在做一个项目,我正在制作和编辑锻炼,然后将它们存储到数据库中(目前使用 firebase)。锻炼创建与 Angular 模板驱动方法完美无缺,但我正在尝试添加可以编辑现有锻炼的功能。因此,我根据我是否处于 editMode
中(此模式由路由参数确定)来使表单具有反应性,信息要么被填充,要么不被填充。
这对于基本字符串填充非常有效,例如 title
和 imagepath
。在这里,我在 editMode
(来自路由参数)并且相应地填充了内容:
但是,我在同一个表单上也有复选框需要填写。我正在为复选框使用 Material 主题。这是来自 workoutphase
selection 的示例:
<mat-form-field
hideRequiredMarker
appearance="fill"
class="phase">
<mat-label>Phase</mat-label>
<mat-select multiple id="phase" name="phase" formControlName="phases">
<mat-option value="Base 1">Base 1</mat-option>
<mat-option value="Base 2">Base 2</mat-option>
<mat-option value="Base 3">Base 3</mat-option>
<mat-option value="Build 1">Build 1</mat-option>
<mat-option value="Build 2">Build 2</mat-option>
<mat-option value="Recovery">Recovery</mat-option>
<mat-option value="Peak">Peak</mat-option>
<mat-option value="Race">Race</mat-option>
<mat-option value="Testing">Testing</mat-option>
</mat-select>
</mat-form-field>
以及它在创建锻炼时的显示方式(问题是在 editMode
中尝试填充时):
这会出现一个列表下拉列表,稍后 returns 一组 select 编辑的项目将被添加到锻炼中。
使用反应式方法,我试图能够在处于 editMode
时(或在拉入信息时)填充复选框。有没有办法填充复选框?或者我只需要 "re-check" 在编辑模式下我想要哪些框?
到目前为止,我已经尝试使用 new FormArray([]);
接受这个数组并按应有的方式填充所有内容。这给了我很多与 formGroup 相关的错误。
此表格在 WorkoutEditComponent
中找到 app/features/workouts-page/workout-edit
您可以通过点击主页 view workouts
页面上的任何锻炼,然后点击顶部的 edit
按钮来进入编辑表单。
Here is the stackblitz to this code.
您可以看到,如果您转到侧边菜单并 select workouts, create workout
,则会有一个复选框选项并且下拉菜单有效。但是当您通过 workouts/edit 时,复选框将无法填充。为了简化问题,我对这个 stackblitz 进行了一些简化和回溯。与 FormArray([])
一起使用的任何方法似乎都会使问题变得更糟。
这里有更多信息:
在检查我是否处于编辑模式后,我正在通过 ngOnInit
初始化表单:
ngOnInit()
this.route.params.subscribe((params: Params) => {
this.id = +params["id"];
this.editMode = params["id"] != null;
this.initForm();
});
}
和 initForm()
:
private initForm() {
let workoutImgPath = "";
let workoutTitle = "";
if (this.editMode) {
const workout = this.workoutService.getWorkout(this.id);
workoutTitle = workout.title;
workoutImgPath = workout.imagePath;
console.log(workout);
}
this.workoutForm = new FormGroup({
title: new FormControl(workoutTitle, Validators.required),
imgPath: new FormControl(workoutImgPath, Validators.required)
});
}
以上是当前有效的解决方案,在编辑模式下仅将图像路径和标题添加到表单。
在编辑现有锻炼时,是否也可以从一系列项目中填充这些复选框?
希望这对您有所帮助,在编辑模式下将阶段列表修补到表单控件。
HTML
<form>
<div>
<button class="btn btn-primary" (click)="onEdit()">Edit</button>
</div>
<div style="margin-top: 100px;">
<mat-form-field>
<mat-label>Phases</mat-label>
<mat-select [formControl]="phases" multiple>
<mat-option value="Base 1">Base 1</mat-option>
<mat-option value="Base 2">Base 2</mat-option>
<mat-option value="Base 3">Base 3</mat-option>
<mat-option value="Build 1">Build 1</mat-option>
<mat-option value="Build 2">Build 2</mat-option>
<mat-option value="Recovery">Recovery</mat-option>
<mat-option value="Peak">Peak</mat-option>
<mat-option value="Race">Race</mat-option>
<mat-option value="Testing">Testing</mat-option>
</mat-select>
</mat-form-field>
</div>
TS
phases = new FormControl();
constructor() { }
ngOnInit() {
this.phases.valueChanges.subscribe(data => {
console.log('Selected Options', data)
});
}
onEdit() {
this.phases.patchValue(["Base 1", "Build 1"])
}
我更新了你的 stackblitz 示例,希望能做到你想做的,实际上很简单。
如何在 "Edit Mode" 中填充表单组的复选框?
我正在做一个项目,我正在制作和编辑锻炼,然后将它们存储到数据库中(目前使用 firebase)。锻炼创建与 Angular 模板驱动方法完美无缺,但我正在尝试添加可以编辑现有锻炼的功能。因此,我根据我是否处于 editMode
中(此模式由路由参数确定)来使表单具有反应性,信息要么被填充,要么不被填充。
这对于基本字符串填充非常有效,例如 title
和 imagepath
。在这里,我在 editMode
(来自路由参数)并且相应地填充了内容:
但是,我在同一个表单上也有复选框需要填写。我正在为复选框使用 Material 主题。这是来自 workoutphase
selection 的示例:
<mat-form-field
hideRequiredMarker
appearance="fill"
class="phase">
<mat-label>Phase</mat-label>
<mat-select multiple id="phase" name="phase" formControlName="phases">
<mat-option value="Base 1">Base 1</mat-option>
<mat-option value="Base 2">Base 2</mat-option>
<mat-option value="Base 3">Base 3</mat-option>
<mat-option value="Build 1">Build 1</mat-option>
<mat-option value="Build 2">Build 2</mat-option>
<mat-option value="Recovery">Recovery</mat-option>
<mat-option value="Peak">Peak</mat-option>
<mat-option value="Race">Race</mat-option>
<mat-option value="Testing">Testing</mat-option>
</mat-select>
</mat-form-field>
以及它在创建锻炼时的显示方式(问题是在 editMode
中尝试填充时):
这会出现一个列表下拉列表,稍后 returns 一组 select 编辑的项目将被添加到锻炼中。
使用反应式方法,我试图能够在处于 editMode
时(或在拉入信息时)填充复选框。有没有办法填充复选框?或者我只需要 "re-check" 在编辑模式下我想要哪些框?
到目前为止,我已经尝试使用 new FormArray([]);
接受这个数组并按应有的方式填充所有内容。这给了我很多与 formGroup 相关的错误。
此表格在 WorkoutEditComponent
中找到 app/features/workouts-page/workout-edit
您可以通过点击主页 view workouts
页面上的任何锻炼,然后点击顶部的 edit
按钮来进入编辑表单。
Here is the stackblitz to this code.
您可以看到,如果您转到侧边菜单并 select workouts, create workout
,则会有一个复选框选项并且下拉菜单有效。但是当您通过 workouts/edit 时,复选框将无法填充。为了简化问题,我对这个 stackblitz 进行了一些简化和回溯。与 FormArray([])
一起使用的任何方法似乎都会使问题变得更糟。
这里有更多信息:
在检查我是否处于编辑模式后,我正在通过 ngOnInit
初始化表单:
ngOnInit()
this.route.params.subscribe((params: Params) => {
this.id = +params["id"];
this.editMode = params["id"] != null;
this.initForm();
});
}
和 initForm()
:
private initForm() {
let workoutImgPath = "";
let workoutTitle = "";
if (this.editMode) {
const workout = this.workoutService.getWorkout(this.id);
workoutTitle = workout.title;
workoutImgPath = workout.imagePath;
console.log(workout);
}
this.workoutForm = new FormGroup({
title: new FormControl(workoutTitle, Validators.required),
imgPath: new FormControl(workoutImgPath, Validators.required)
});
}
以上是当前有效的解决方案,在编辑模式下仅将图像路径和标题添加到表单。
在编辑现有锻炼时,是否也可以从一系列项目中填充这些复选框?
希望这对您有所帮助,在编辑模式下将阶段列表修补到表单控件。
HTML
<form>
<div>
<button class="btn btn-primary" (click)="onEdit()">Edit</button>
</div>
<div style="margin-top: 100px;">
<mat-form-field>
<mat-label>Phases</mat-label>
<mat-select [formControl]="phases" multiple>
<mat-option value="Base 1">Base 1</mat-option>
<mat-option value="Base 2">Base 2</mat-option>
<mat-option value="Base 3">Base 3</mat-option>
<mat-option value="Build 1">Build 1</mat-option>
<mat-option value="Build 2">Build 2</mat-option>
<mat-option value="Recovery">Recovery</mat-option>
<mat-option value="Peak">Peak</mat-option>
<mat-option value="Race">Race</mat-option>
<mat-option value="Testing">Testing</mat-option>
</mat-select>
</mat-form-field>
</div>
TS
phases = new FormControl();
constructor() { }
ngOnInit() {
this.phases.valueChanges.subscribe(data => {
console.log('Selected Options', data)
});
}
onEdit() {
this.phases.patchValue(["Base 1", "Build 1"])
}
我更新了你的 stackblitz 示例,希望能做到你想做的,实际上很简单。