如何有条件地要求角4的表格输入？

Question

我使用模板驱动的表单来添加任务,并且有两个输入字段的类型编号用于完成任务的估计分钟,

• 一个字段用于估计的小时数和小时数
• 另一个是用于完成任务的估计分钟数

因为任务估计可以在几个小时内完成,例如1小时,或小时和分钟,如1Hrs 30分钟,所以我想有条件地设置输入所需的属性.因此,如果在提交表单时两个输入都为空,则必须设置2个输入中的一个或表单验证错误.

到目前为止,我已经这样做但验证不起作用

<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>

Answer 1

请尝试使用[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"
    >

Answer 2

您需要将!estimateMins.valid单引号括起来：

[required]="'!estimateMins.valid'" 和 [required]="'!estimateHrs.valid'"

看到这个笨蛋

Answer 3

这是我对Angular 5的工作解决方案:

在组件中:

@Input()
required: boolean;

在输入(或选择)元素的模板中:

[required]="required"

在选择器上:

[required]="true"

喜欢@DeborahK双重检查,不需要单引号:-)