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：

因此，基于这三种类型，一旦用户为新类型选择了特定类型，例如，我想向他显示名称和数字的文本框，
如果是其他值，则显示其他文本框。

Answer 1

尝试这样

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

在您的组件中。

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  
}

Answer 2

Demo with Bydefault a checkbox selected

应用代码： https://stackblitz.com/edit/angular-27et6e?file=src/app/app.component.ts
（在此代码中，默认情况下，我选择了第三个复选框，如果需要，可以选择第一个复选框）

方法：

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

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

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

Angular 6-根据单选按钮的部分显示表单组件

2 个答案: