My form has three radio buttons. The first one is selected by default. The second one should display an input field conditionally upon clicking it, and when the third option is selected, it should populate that input field with a certain value.
div>
<h2>{{title}}</h2>
<label class="form_label" for="account">Output Type</label>
<div class="output_row_styles">
<span><input type="radio" [value]="pdf" name="output" (click)="outputType ='pdf'" [checked]="outputType =='pdf'"> PDF</span>
<span><input type="radio" [value]="email" name="output" (click)="outputType ='email'" [checked]="outputType =='email'"> Email </span>
<span><input type="radio" [value]="legal" name="output" (click)="outputType ='transfer'" [checked]="outputType =='transfer'"> Transfer</span>
</div>
<div *ngIf = "outputType == 'email' || outputType == 'transfer'" class="output_type_div">
<div class="row_styles">
<label class="form_label" for="recipient_email">Recipient E-mail address</label>
<input type="text" [value]="outputType == 'transfer' ? '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e8898a8ba8909192c68b8785">[email protected]</a>' : ''" name="recipient_email" class="input-text" [(ngModel)]="recipientEmailAddress"
required/>
</div>
</div>
Clicking the radio buttons in order (Second and then third) works fine. However, selecting the third one when the first one is already selected does not populate the field.
I have searched for solutions or similar questions but could not find any helpful information.