angular - 如何为Angular8中选择的每个复选框获取我的下拉列表的值
问题描述
我正在从我从 api 获得的数据中动态创建复选框和相关的下拉列表......
我的html代码如下::
<label [for]="i" class="form-check-label fw7 h5 mb0" formArrayName="planDivList" *ngFor="let plan of planForm.controls.planDivList.controls; let i = index">
<br>
<input [name]="i" [id]="i" class="form-check-input" type="checkbox" [formControlName]="i">
{{planDivList[i].planCode}}
<label *ngIf="planDivList[i].divisions.length > 0" for="inputDiv">
Divisions
<select id="inputDiv" formcontrolName='divCtrl'>
<option *ngFor="let division of planDivList[i].divisions" Value="division.divisionCode">
{{division.divisionName}}
</option>
</select>
</label>
</label>
我的数据集是
planDivList = [
{ planCode: "B3692", divisions: [] },
{ planCode: "B3693", divisions: [] },
{ planCode: "B67", divisions: [{ divisionCode: "2", divisionName: "Assisted Living " }, { divisionCode: "1", divisionName: "LILC" }] },
{ planCode: "B69", divisions: [{ divisionCode: "3", divisionName: "Four Seasons" }, { divisionCode: "2", divisionName: "Lakeside" }, { divisionCode: "1", divisionName: "Sunrise" }] }
];
ts文件:
const selectedPlans = this.planForm.value.planDivList
.map((checked, index) => (checked ? this.planDivList[index].planCode : null))
.filter(value => value !== null);
console.log(selectedPlans);
这是我的堆栈闪电战
https://stackblitz.com/edit/angular-fsgswa?file=src%2Fapp%2Fapp.component.ts
我能够获得选定的复选框值。但是我如何获得在提交按钮中为该复选框选择的相应部门的值?任何帮助表示赞赏
解决方案
为了解决您的问题,我采取了几个步骤,我将在下面分解。
1. 构建你的表单数组
您有一个数据数组,每个项目都应该有多个控件(复选框和选择)。这需要表单组的表单数组。
您的表单是一个数组,仅此而已,因此我们可以简单地将表单绑定到一个数组。
稍后我们将需要引用嵌套的表单控件值,因此将它们存储在一个属性中以便于引用。
form: FormArray;
private formControls: {
checkbox: FormControl;
division: FormControl;
}[];
// initialise component in ngOnInit instead of constructor
ngOnInit() {
this.formControls = this.plans.map((plan, i) => {
const divisionCode = plan.divisions.length > 0
? plan.divisions[0].divisionCode
: '';
return {
checkbox: this.fb.control(i === 0),
division: this.fb.control(divisionCode)
};
});
const formGroups = this.formControls.map(x => this.fb.group(x));
this.form = this.fb.array(formGroups, this.minSelectedCheckboxes(1));
}
2. 将 HTML 绑定到表单
(submit)
您应该更喜欢使用按钮来处理表单提交(click)
。(submit)
将处理可以提交表单的所有方式。
HTML 绑定与我们构建的表单的结构相匹配。请注意复选框和除法控件是如何绑定到i
数组中的第一个表单组的。
我还建议尽可能使用您的模型来生成循环,并将表单绑定限制为表单控制指令。
<form [formGroup]="form" (submit)="onSubmit()">
<div *ngFor="let plan of plans; index as i" [formGroupName]="i">
<label>
<input type="checkbox" formControlName="checkbox">
{{plan.planCode}}
</label>
<label *ngIf="plan.divisions.length > 0" >
Divisions
<select formControlName="division">
<option *ngFor="let division of plan.divisions"
[value]="division.divisionCode">
{{division.divisionName}}
</option>
</select>
</label>
</div>
<div *ngIf="formInvalid && form.hasError('required')">
At least one plan must be selected
</div>
<button>Enroll</button>
</form>
3.处理提交
现在只需查询表单控件数组以找出检查了哪些,以及选择的分区代码与哪些相关。
onSubmit(){
this.formInvalid = this.form.invalid;
if (this.formInvalid) {
return;
}
this.selectedPlans = this.plans
.map((plan, i) => ({
planCode: plan.planCode,
selected: this.formControls[i].checkbox.value,
divisionCode: this.formControls[i].division.value
}))
.filter(x => x.selected);
}
您需要的实际输出可能与我的示例略有不同,为了更简单的演示,我重命名了您的一些属性。希望我已经展示了您可以应用于自己的表单的技术。
推荐阅读
- r - 识别大型数据集中具有高相关性的列
- php - 'clearToolbar'工具栏后的jqGrid没有结果
- java - build.gradle 中的多个存储库不起作用 (jzy3d) (MultiModuleProject)
- amadeus - 为什么我从 Flight Cheapest Date Search 端点获取交替数据?
- segmentation-fault - 使用带有 Zig 的 X11 C 库时出现分段错误
- flutter - 颤振 1.23.0-18.1pre BottomNavigationBar 已弃用 'title' 使用 'label'
- php - 试图找到所有hastag计数并在MYSQL DB中插入一个数量
- javascript - PRISMA,枚举数组的 WHERE 包含子句
- sql - 使用 HANA SQL 获取当月过去的天数和剩余天数
- swift - 为什么我的 StackView 不工作?元素完全移位