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

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>

按顺序单击它们，即（第二个然后第三个）可以正常工作。但是选择第一个选择第三次剂量不填充该字段。

见 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>

更新的 Plunker

Answer 2

根据费萨尔的回答用更优化的代码更新了我的代码：

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>