Angular Table 中反应式表单中的多个复选框
Multiple Checkbox in Reactive Forms in Angular Table
我的 angular 应用程序中有一个响应式表单 table,每行有 3 个复选框。
出席、缺席和离开。它们只有相同的formControlName="status"。他们应该只点击一行的一个复选框。状态如下:
现在 = 1
缺席 = 2
离开 = 3
我怎样才能做到这一点?
请检查此 stackblitz 代码:CLICK HERE
initGroup() {
let rows = this.form.get('rows') as FormArray;
rows.push(this.fb.group({
name: [null, Validators.required],
status: [null, Validators.required]
}))
}
为什么要使用复选框你应该使用单选按钮。只需更改状态表单控件的类型 <input type="radio">
它就可以正常工作。我还测试了你的 stackblitz 代码。
<tbody>
<tr *ngFor="let row of form.controls.rows.controls; let i = index" [formGroupName]="i">
<td>
<div class="form-group row">
<input type="text" formControlName="name">
</div>
</td>
<td>
<input type="radio" class="custom-control-input" id="customcheckbox{{i}}" formControlName="status" value=1><label class="custom-control-label" for="customcheckbox{{i}}"></label>
</td>
<td>
<input type="radio" class="custom-control-input" id="customcheckbox{{i}}" formControlName="status" value=2><label class="custom-control-label" for="customcheckbox{{i}}"></label>
</td>
<td>
<input type="radio" class="custom-control-input" id="customcheckbox{{i}}" formControlName="status" value=3><label class="custom-control-label" for="customcheckbox{{i}}"></label>
</td>
<td>
<button type="button" class="btn btn-square btn-danger btn-sm waves-effect waves-light" (click)="onDeleteRow(i)"> <i class="icofont icofont-ui-delete"></i> Remove</button>
</td>
</tr>
</tbody>
也可以使用复选框来完成,但根据您的要求,使用单选按钮始终是可行且更有效的,因为它默认为您提供仅选择一个选项的功能,而对于复选框,您将不得不明确地写下更多代码来为其提供相同的功能,这反过来会增加您的代码库并且没有任何好处。
继续@Debabrata Paul Chowdhury 提供的内容。
我的 angular 应用程序中有一个响应式表单 table,每行有 3 个复选框。 出席、缺席和离开。它们只有相同的formControlName="status"。他们应该只点击一行的一个复选框。状态如下:
现在 = 1
缺席 = 2
离开 = 3
我怎样才能做到这一点? 请检查此 stackblitz 代码:CLICK HERE
initGroup() {
let rows = this.form.get('rows') as FormArray;
rows.push(this.fb.group({
name: [null, Validators.required],
status: [null, Validators.required]
}))
}
为什么要使用复选框你应该使用单选按钮。只需更改状态表单控件的类型 <input type="radio">
它就可以正常工作。我还测试了你的 stackblitz 代码。
<tbody>
<tr *ngFor="let row of form.controls.rows.controls; let i = index" [formGroupName]="i">
<td>
<div class="form-group row">
<input type="text" formControlName="name">
</div>
</td>
<td>
<input type="radio" class="custom-control-input" id="customcheckbox{{i}}" formControlName="status" value=1><label class="custom-control-label" for="customcheckbox{{i}}"></label>
</td>
<td>
<input type="radio" class="custom-control-input" id="customcheckbox{{i}}" formControlName="status" value=2><label class="custom-control-label" for="customcheckbox{{i}}"></label>
</td>
<td>
<input type="radio" class="custom-control-input" id="customcheckbox{{i}}" formControlName="status" value=3><label class="custom-control-label" for="customcheckbox{{i}}"></label>
</td>
<td>
<button type="button" class="btn btn-square btn-danger btn-sm waves-effect waves-light" (click)="onDeleteRow(i)"> <i class="icofont icofont-ui-delete"></i> Remove</button>
</td>
</tr>
</tbody>
也可以使用复选框来完成,但根据您的要求,使用单选按钮始终是可行且更有效的,因为它默认为您提供仅选择一个选项的功能,而对于复选框,您将不得不明确地写下更多代码来为其提供相同的功能,这反过来会增加您的代码库并且没有任何好处。
继续@Debabrata Paul Chowdhury 提供的内容。