I have the following form in my Angular application where I want to display different input field based on the checkbox selection. I have used [(ngModel)] to bind the value and with *ngIf I am trying to show/hide the text field below. This one works somewhat fine but I am not able to set 'checked' to emailField. Can anyone please tell me what am I doing wrong here.
By default I want emailField to be checked and show the corresponding input field.
<form class="reminder-form">
<div class="form-check">
<input [(ngModel)]="emailField" class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Email
</label>
</div>
<div class="form-check">
<input [(ngModel)]="smsField" class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
SMS
</label>
</div>
<div class="email-box" *ngIf='emailfield'>
<label class="form-check-label" for="noRemind">
Email
</label>
<input type="email" name="email" class="form-control new-reading-input" placeholder="">
</div>
<div class="sms-box" *ngIf='smsField'>
<label class="form-check-label" for="noRemind">
SMS
</label>
<input type="number" name="sms" class="form-control new-reading-input" placeholder="">
</div>
</form>
Aucun commentaire:
Enregistrer un commentaire