单击角度4中输入文本字段的单选按钮更改

Question

我有两个单选按钮。选择按钮时，每个按钮应显示不同的输入文本字段，其他字段应隐藏。我怎么用角4做这个？我尝试过使用* ngIf和ngModel。无法解决问题

Answer 1

  

看看：

Source Code, StackBlitz

Demo

  

HTML

Type 1: <input type="radio" name="foo" value="type_1" [(ngModel)]="radioBtn">

<br>

Type 2: <input type="radio" name="foo"
 [(ngModel)]="radioBtn" value="type_2">

<br>

<ng-container *ngIf="radioBtn == 'type_1'">
    Type 1: <input type="text" placeholder="Type 1">
</ng-container>

<ng-container *ngIf="radioBtn == 'type_2'">
    Type 2: <input type="text" placeholder="Type 2">
</ng-container>

  

TS

export class AppComponent  {
  radioBtn: string = 'type_1';
}

  

说明：

要使单选按钮有效，您需要做两件事：

1. 您需要为属于name="foo"
的所有单选按钮设置相同的名称
2. 您需要为每个单选按钮value="bar"
指定值