Here is the HTML code for a row containing radio button selections:
<div class="form-row">
<div class="col-md-3 mb-3">
<div class = "form-group form-inline col-md-12 mb-3">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" formControlName = "flag" value = "Y" (ngModelChange)="radioValueCheck(1)" >
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" formControlName = "flag" value = "N" (ngModelChange)="radioValueCheck(2)" >
<label class="form-check-label">No</label>
</div>
</div>
</div>
<div class="col-md-9 mb-3">
<div class="form-row">
<div class="col-md-6 mb-3">
<label> Date</label>
<div class="input-group">
<input class="form-control" placeholder="mm/dd/yyyy" formControlName="date" ngbDatepicker #date="ngbDatepicker" [attr.disabled]="showInputFlg ? 'disabled' : null">
<div class="input-group-append">
<button class="btn btn-secondary" (click)="date.toggle()" type="button">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
In my TypeScript file, I have a function called radioValueCheck(x) to set showInputFlg to true or false based on which radio button is selected.
radioValueCheck(x) {
if(x == 1){
this.showInputFlg=true;
}
else{
this.showInputFlg=false;
}
}
I am trying to enable/disable the date field based on the radio button selection. How can I achieve this?