Post
Ask Question
Anil kumar

Anil kumar

  • NA
  • 19
  • 3.2k

Conditional validation in angular 4

Dec 4 2017 11:11 PM
i have a form with multiple textbox and check box controls .. i need to put conditional validation for that in angular 4.
when i checked a checkbox based on that some text box's enabled ..so when i checked a check box i need to put required validation's for enabled text box's 
this is my code ..
 
<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>