Angular 9 Reactive 表单根据单选按钮选择显示隐藏 div

Question

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

这是我的代码:

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