根据单选按钮选择使用基于模板的表单填充字段的单选按钮绑定

Question

我有一个带有三个单选按钮的窗体。第一个是默认选中的。第二个必须显示有条件地点击它的输入字段。在选择第三个选项时，用某个值填充该输入字段。

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> 

点击他们为了即（第二和第三然后）工作正常。但选择第一个时，第三个选择剂量不会填充该字段。

See Plunker :

试图找到任何相关的解决方案或问题，但没有帮助。

Answer 1

可能是更改检测问题。但不确定。您可以使用[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> 

Updated Plunker

Answer 2

更新根据我的代码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>