如何有条件地要求角度4中的表格输入? [英] How to conditionally require form inputs in angular 4?
问题描述
我正在使用模板驱动的表单来添加任务,并且有2个类型为number的输入字段,用于估计完成任务所需的分钟数,
I am using template driven forms for adding the task, and there are 2 input fields of type number for estimated mins to complete task,
- 一个字段用于估计小时数,
- 另一个人需要几分钟才能完成任务
因为任务估计可以像 1hrs 这样的小时完成,也可以像 1Hrs 30Mins 这样的小时和分钟完成,所以我想设置属性 required 以有条件地输入.因此,必须设置2个输入之一,否则在提交表单时如果两个输入都为空,则会发生表单验证错误.
since the task estimate can be done either in hours like 1hrs , or in hours and minutes like 1Hrs 30Mins , so i want to set attribute required to inputs conditionally. So one of the 2 inputs must be set or form validation error will occur if both inputs are empty when submitting form.
到目前为止,我已经做到了,但是验证不起作用
so far i have done this but validation is not working
<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].
Try using [attr.required] instead.
<input
type="number"
min="0"
max="10"
id="estimate_hrs"
ngModel
name="estimate_hrs"
mdInput
[attr.required]="!estimateMins.valid"
placeholder="Estimated Hours"
#estimateHrs="ngModel"
>
这篇关于如何有条件地要求角度4中的表格输入?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!