0

私は3つのラジオボタンを持つフォームを持っています。最初の 1 つがデフォルトで選択されます。2 つ目は、クリックする条件付きで入力フィールドを表示する必要があります。そして、3 番目のオプションを選択すると、その入力フィールドに何らかの値が設定されます。

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>

それらを順番にクリックすると（2番目、次に3番目）、正常に機能します。ただし、最初の 1 つが選択されているときに 3 番目を選択すると、フィールドは入力されません。

プランカーを参照してください。

関連する解決策や質問を見つけようとしましたが、助けにはなりませんでした。

4

2 に答える 2

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>

更新されたプランカー

于 2017-08-24T17:14:01.793 に答える