我想创建一个复选框列表,如下所示。我想显示一个复选框和名称,并在提交时我希望获得所有选定的值。我无法显示名称并在复选框上设置所选值。
[] Jim
[x] Mondo
[] Ann
我创建了这段代码:
<div *ngIf="formSubmitted && teamForm.pristine" class = "submitted"> Form submitted successfully. </div>
<div class="team">
<form [formGroup]="teamForm" (ngSubmit)="onFormSubmit()">
<div class="all-emp">
<b> Employees in Team :{{empFormArray.controls.length}}</b><br><br>
<div formArrayName="empFormArray">
<div *ngFor = "let emp of empFormArray.controls; let idx = index" [formGroupName]="idx" class="employee">
<p> <b>Employee : {{idx + 1}}</b> </p>
<p>Emp Id : <input type="checkbox" [value]="emp.isSelected" formControlName="name">{{emp.name}}</p>
</div>
</div>
</div> <br/>
<button [disabled]="teamForm.invalid">SUBMIT</button>
这是我的组件类。请检查我的员工方法:
export class CheckboxlistComponent implements OnInit {
teamForm:FormGroup;
formSubmitted = false;
constructor(
private formBuilder:FormBuilder) {
}
ngOnInit() {
this.createTeamForm();
this.addEmployee('00', true);
this.addEmployee('99', false);
this.addEmployee('77', false);
}
createTeamForm(){
this.teamForm = this.formBuilder.group({
empFormArray: this.formBuilder.array([])
});
}
get empFormArray(): FormArray{
return this.teamForm.get('empFormArray') as FormArray;
}
addEmployee(name, selected){
let obj = {
name: name,
isSelected: selected
}
let fg = this.formBuilder.group({
name: [obj]
});
this.empFormArray.push(fg);
}
onFormSubmit() {
let data = JSON.stringify(this.teamForm.value);
console.log(data);
this.formSubmitted = true;
// this.teamForm.reset();
}
}
你正在推动一个包含name
和name
的对象isSelected
到你的formArray:
let obj = {
name: name,
isSelected: selected
}
let fg = this.formBuilder.group({
name: [obj] // here!
});
this.empFormArray.push(fg);
你想要的只是将obj
按原样推送到formArray,所以:
let fg = this.formBuilder.group({
name: name,
isSelected: selected
});
此外,您还需要修改模板并将复选框中的formcontrol设置为isSelected
而不是name
,并删除[value]
。另请注意,我们需要在模板中使用controls
来获取您的员工姓名。所以改变:
<input type="checkbox" [value]="emp.isSelected" formControlName="name">{{emp.name}}
至:
<input type="checkbox" formControlName="isSelected">{{emp.controls.name.value}}
那应该解决你的问题:)
我推荐使用https://vitalets.github.io/checklist-model/。这使得使用检查表变得非常容易。