根据单选按钮选择使用基于模板的表单填充字段的单选按钮绑定
Radio button binding using a template based form populating field according to radio button selection
我有一个带有三个单选按钮的表单。默认选择第一个。第二个必须在点击它的条件下显示输入字段。并在选择第三个选项时用一些值填充该输入字段。
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' ? 'abc@xyz.com' : ''" name="recipient_email" class="input-text" [(ngModel)]="recipientEmailAddress"
required/>
</div>
</div>
按顺序点击它们,即(第二个然后第三个)效果很好。但是在选择第一个时选择第三个不会填充该字段。
试图找到任何相关的解决方案或问题,但没有帮助。
可能是变化检测问题。但不确定。您可以使用 [hidden]
代替:
<div [hidden] = "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' ? 'abc@xyz.com' : ''" name="recipient_email" class="input-text" [(ngModel)]="recipientEmailAddress"
required/>
</div>
根据 faisal's 使用更优化的代码回答更新了我的代码:
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 [hidden] = "outputType == 'pdf'" 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' ? 'abc@xyz.com' : ''" name="recipient_email" class="input-text" [(ngModel)]="recipientEmailAddress"
required/>
</div>
</div>
我有一个带有三个单选按钮的表单。默认选择第一个。第二个必须在点击它的条件下显示输入字段。并在选择第三个选项时用一些值填充该输入字段。
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' ? 'abc@xyz.com' : ''" name="recipient_email" class="input-text" [(ngModel)]="recipientEmailAddress"
required/>
</div>
</div>
按顺序点击它们,即(第二个然后第三个)效果很好。但是在选择第一个时选择第三个不会填充该字段。
试图找到任何相关的解决方案或问题,但没有帮助。
可能是变化检测问题。但不确定。您可以使用 [hidden]
代替:
<div [hidden] = "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' ? 'abc@xyz.com' : ''" name="recipient_email" class="input-text" [(ngModel)]="recipientEmailAddress"
required/>
</div>
根据 faisal's 使用更优化的代码回答更新了我的代码:
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 [hidden] = "outputType == 'pdf'" 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' ? 'abc@xyz.com' : ''" name="recipient_email" class="input-text" [(ngModel)]="recipientEmailAddress"
required/>
</div>
</div>