Angular 4中的条件验证

Question

我有一个带有多个文本框和复选框控件的表单。我需要在角度4中对其进行条件验证。

**当我选中一个复选框时，基于某个文本框已启用..所以当我选中一个复选框时，我需要为启用的文本框添加所需的验证**。

这是我的代码..

<form #fm="ngForm" id="MachineshopTab" (ngSubmit)="fm.form.valid && 
    MachineSave(fm.value,'Continue')">
    <div class="row">
        <div class="form-group">
            <div class="col-sm-4 col-md-4">
            </div>
            <div class="col-sm-8 col-md-12 col-lg-8">
                <div class="form-group row">
                    <label class="col-sm-4 col-form-label" for="Ringname">Tool Ring Name</label>
                    <div class="col-sm-6">
                        <input #Ringname="ngModel" required [(ngModel)]="machineshop.Ringname" type="text" class="form-control form-control-default" placeholder="Tool Ring 
    Name" (change)="ToolRingNameChange(fm.value)" id="Toolringtext" name="Ringname" [style.border-color]="(fm.submitted &&  
    !Ringname.valid)==true?'#d9534f':'#75777c'">
                        <div class="text text-danger col-sm-12 p-0" *ngIf="fm.submitted && 
    !Ringname.valid">Device Name is required</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <input id="chkSpacer" class="border-checkbox depart" #Spacer="ngModel" name="Spacer" [(ngModel)]="machineshop.Spacer" type="checkbox" value="Spacer">

            <label class="border-checkbox-label" for="chkSpacer">Spacer</label>
        </div>

        <div class="form-group" id="divjig" [hidden]="!machineshop.Jig">
            <div class="col-sm-4 col-md-4">
                <div class="form-group row">
                    <label class=" col-form-label title-head" for="Jig">Jig</label>
                </div>
            </div>
            <div class="col-sm-8 col-md-12 col-lg-8">
                <div class="form-group row">

                    <label class="col-sm-4 col-form-label" for="Quantity">Quantity</label>
                    <div class="col-sm-6">
                        <input #Jigquantity="ngModel" *ngIf="Spacer.valid==true?'required':''" [(ngModel)]="machineshop.Jigquantity" type="text" class="form-control form-
    control-default" placeholder="Quantity" name="Jigquantity">
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12 text-right">
            <button type="submit" class="continue btn btn-warning">Continue
            </button>
        </div>

    </div>
</form>