如何有条件地要求角4的形式输入？

Question

我使用模板驱动的表单添加任务，有2个输入字段，类型为number，用于估计完成任务的分钟数，

• 一个字段用于估计小时数和

因为任务估计可以在几个小时内完成，比如1小时，或者在几个小时和几分钟内完成，比如1小时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

你需要把你的！estimateMins.在单引号中有效，如：

[必需]="'！ins.valid'"和[必需]="！rs.valid

看到这个了吗

Answer 2

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

在组件中：

@Input()
required: boolean;

在输入（或选择）元素的模板中：

[required]="required"

在选择器上：

[required]="true"

像@DeborahK双重检查，不需要单引号：-）

Answer 3

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