Angular 6-显示基于单选按钮部分的表单组件

Question

场景：

• 我正在使用角材料和角6制作一个表格
• 我想根据从单选按钮中选择的类型显示相关的文本框

我用于单选按钮的代码

<div class="form-group m-form__group row">
    <div class="m-radio-list">
        <mat-radio-group>
            <p>
                <mat-radio-button value="newBusiness">New</mat-radio-button>
                <mat-radio-button value="renewal">Renewal</mat-radio-button>
                <mat-radio-button value="rollover">Old</mat-radio-button>
            </p>
        </mat-radio-group>
    </div>
</div>

Todo:

• 因此，基于这3种类型，一旦用户选择了一种特定的类型，例如，我想向他显示姓名和号码的文本框，
  如果是另一个值，则是其他文本框

Answer 1

默认选中复选框的演示

应用程序代码：https://stackblitz.com/edit/angular-27et6e?file=src/app/app.component.ts
(在这个代码中，我默认选择了第三个复选框，如果你想的话，你可以选择第一个(

方法：

• 制作2个div容器，一个用于radio-buttons，另一个用于根据所选radio-button显示相应的输入容器
• 您可以像(change)="changeComboo($event)"那样使用change事件，
  我刚刚使用ngModel将值绑定到像[(ngModel)]="favoriteSeason"这样的变量

更新1(默认选中第一个复选框(：

• 由于mat-radio-group是使用[(ngModel)]="favoriteSeason"绑定的，
  因此在函数ngOnint()-中，我们可以通过this.favoriteSeason = this.seasons[0];(如果我们想选择第一个复选框(为该favoriteSeason变量分配一个默认值

Answer 2

像这样尝试

<div class="radio">  
   <label>  
       <input type="radio" name="radio" value="New" (click)="setradio('New')" [checked]='true' ngModel>  
      New
  </label>  
</div>  
<div class="radio">  
 <label>  
    <input type="radio" name="radio" value="Renewal" (click)="setradio('Renewal')" ngModel>  
        Renewal
  </label>  
</div>  
<div *ngIf="isSelected('New')" >  
    <input type="text"/>   New radio button selected  
</div>  
<div *ngIf="isSelected('Renewal')">  
    <input type="text"/> Renewal radio button selected  
</div>

在您的组件中.ts

private selectedLink: string="New";        
setradio(e: string): void {
    this.selectedLink = e;  
}  
isSelected(name: string): boolean {  
    if (!this.selectedLink) { // if no radio button is selected, always return false so every nothing is shown  
        return false;  
    }    
    return (this.selectedLink === name); // if current radio button is selected, return true, else return false  
}