我正在使用模板驱动的表单来添加任务,并且有 2 个数字类型的输入字段用于估计完成任务的分钟数,
- 一个字段用于估计小时数和
- 另一个是完成任务的估计分钟数
因为任务估计可以在几小时内完成,例如1hrs,或者像这样的小时和分钟1小时30分钟,所以我想设置属性required有条件地输入。因此,必须设置两个输入之一,否则如果提交表单时两个输入均为空,则会发生表单验证错误。
到目前为止我已经做到了这一点,但验证不起作用
<form class="add-task" (ngSubmit)="onSubmit(newtask)" #newtask="ngForm">
<div class="estimate-container">
<input
type="number"
min="0"
max="10"
id="estimate_hrs"
ngModel
name="estimate_hrs"
mdInput
[required]="!estimateMins.valid"
placeholder="Estimated Hours"
#estimateHrs="ngModel"
>
<div class="error-msg" *ngIf="!estimateHrs.valid && !estimateMins.valid">
Please enter estimated hours
</div>
<input
type="number"
min="0"
max="60"
id="estimate_min"
ngModel
name="estimate_min"
mdInput
[required]="!estimateHrs.valid"
placeholder="Estimated Minutes"
#estimateMins="ngModel"
>
<div class="error-msg" *ngIf="!estimateMins.valid && !estimateHrs.valid">
Please enter estimated minutes
</div>
</div>
<button type='submit' [disabled]="!newtask.valid" >Submit</button>
</form>
尝试使用 [attr.required] 代替。
<input
type="number"
min="0"
max="10"
id="estimate_hrs"
ngModel
name="estimate_hrs"
mdInput
[attr.required]="!estimateMins.valid"
placeholder="Estimated Hours"
#estimateHrs="ngModel"
>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)