根據單選按鈕選擇使用基於模板的表單填充字段的單選按鈕綁定

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>