我有一个反应式表单,它有一个带有复选框的表格,每行都有一些用户输入。我想这样做,如果用户选中复选框,则需要填写相应的输入。例如,如果选中 11+ 但相应的用户输入即价格未填写并且用户尝试按下添加按钮,则它不应该提交表单,它应该提供一条消息。我不确定如何有条件地应用这个逻辑。
TS 中的表格:
this.addSubjectForm = new FormGroup({
'type' : new FormControl(null, Validators.required),
'subject' : new FormControl(null, Validators.required),
'discount' : new FormControl(null),
'levelDefinition' : new FormGroup({
'11+' : new FormControl(null),
'KS3' : new FormControl(null),
'GCSE' : new FormControl(null),
'A-Level' : new FormControl(null),
'Degree' : new FormControl(null)
})
HTML 表格/表单:
<form [formGroup]="addSubjectForm" (ngSubmit)="onAddSubject()">
<!-- the first three inputs (type, subject and discount) are not included here to reduce the amount of code shown in the question -->
<div formGroupName="levelDefinition">
<table class="table table-bordered table-condensed table-hover">
<thead>
<tr>
<th class="text-center">
<input type="checkbox" name="all"
(change)="isSelected = !isSelected" />
</th>
<th>Level</th>
<th>Price</th>
<th>Discounts</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let level of levels ; let i = index">
<td class="text-center" >
<input type="checkbox"
value="{{level.id}}"
appHighlightOnCheck
formControlName="{{level}}"
[checked]="isSelected" />
</td>
<td class="text-center">{{ level }}</td>
<td>
<input
type="text"
class="form-control">
</td>
<td>
<input
type="text"
class="form-control">
</td>
</tr>
</tbody>
</table>
</div>
</form>
<button class="btn btn-primary" type="submit">Add</button>
这样做的方法是使用跨领域自定义验证器。您需要将 2 个表单控件与表单组嵌套(在 ts 和 html 中)。然后你需要构建一个自定义验证器并将其附加到这个 formGroup。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句