Question

我有一个Angular应用程序，并且我有Angular Material Radio Group 我想根据角度材料单选选择显示和隐藏div，我的表单是Reactive 我搜索了其他不是反应形式的解决方案，谢谢。

这是我的代码：

       <div>
                        <label id="theschedule">Due: </label>
                        <mat-radio-group aria-labelledby="theschedule" formControlName="Schedule" >
                            <mat-radio-button id="{{sch_item.Name}}"  *ngFor="let sch_item of schedule" class="example-radio-button"  [value]="sch_item.ID" >
                                {{sch_item.Name}} &nbsp;
                            </mat-radio-button>
                        </mat-radio-group>
                </div>
             
                <div class="row-two input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px" [hidden]="myform.controls.Schedule.value=3">
                   <mat-form-field appearance="outline">
                        <input matInput [matDatepicker]="StartDate" placeholder="Start date *" [min]="sDate"
                            formControlName="StartDate">
                            <mat-label>Start Date *</mat-label>
                        <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle>
                        <mat-datepicker #StartDate></mat-datepicker>
                    </mat-form-field> 
    
                    <mat-form-field appearance="outline">
                        <input matInput [matDatepicker]="EndDate" placeholder="Due date *" [min]="mDate"
                            formControlName="EndDate">
                            <mat-label>Due date*</mat-label>
                        <mat-datepicker-toggle matSuffix [for]="EndDate"></mat-datepicker-toggle>
                        <mat-datepicker #EndDate></mat-datepicker>
                    </mat-form-field>
                </div>

Answer 1

您可以简单地使用HTML上的单选按钮的值。无需为此定义变量。

<div *ngIf="yourForm.value.Schedule === 'yourRadioButtonValue' ">
  <!-- radio button div -->
</div>

每个单选按钮都可以使用div。只需更改'yourRadioButtonValue'。您可以像这样动态地进行操作。

<section *ngFor="let sch_item of schedule">
  <div *ngIf="form.value.Schedule === sch_item.ID">
    {{sch_item.name}} content
  </div>
</section>

工作demo。

Answer 2

您可以使用反应形式的订阅更改：

在您的component.ts中创建一个布尔变量并将其设置为false。

 ishidden:boolean = false;

 this.myform.valueChanges.subscribe(res=>{
    if(res.Schedule=='whatever number or text '){
      this.ishidden= true;
    }else{
      this.ishidden = false;
    }
 });

并在您的component.html要隐藏的div或元素中添加以下代码

 <div *ngIf="ishidden ">
    //what ever you want to hide and show based on your radio selection
 </div>

或者您可以使用更改事件

类似于以下代码：

  <label id="theschedule">Due: </label>
                        <mat-radio-group aria-labelledby="theschedule" formControlName="Schedule" >
                            <mat-radio-button (change)="radioButtonChanged($event);" id="{{sch_item.Name}}"  *ngFor="let sch_item of schedule" [value]="sch_item.ID" >
                                {{sch_item.Name}} &nbsp;
                            </mat-radio-button>
                        </mat-radio-group>

以及您的组件中

 radioButtonChanged($event){
   let radioValue = event.target['value'];
    if(radioValue ==1){
      this.ishidden = true;
    }else{
      this.ishidden = false;
    }
 }

希望这会有所帮助

Answer 3

解决方案是检测单选按钮的更改（change）=“ radioButtonChanged（$ event）

<mat-radio-group aria-labelledby="theschedule" formControlName="Schedule" >
                            <mat-radio-button id="{{sch_item.Name}}"  *ngFor="let sch_item of schedule" class="example-radio-button"  [value]="sch_item.ID" (change)="radioButtonChanged($event)">
                                {{sch_item.Name}} &nbsp;
                            </mat-radio-button>
                        </mat-radio-group>

<div *ngIf = "showDiv">
//Your content goes here.
</div>

然后在ts文件中，您需要访问此事件并相应地显示和隐藏div。在ts文件中定义函数。另外，创建一个变量 divShow ，该变量是可以显示或隐藏特定div的布尔值。

showDiv : boolean;

radioButtonChanged($event){
   // if you need the event source and value it can be accessed.
  console.log($event.source.name, $event.value);
 if($event.value == true){
    showDiv = true;
}else{
   showDiv = false;
}
}

Angular 9反应性表单根据单选按钮选择显示隐藏div

3 个答案: