如何通过单选按钮控件动态更改 div 中的内容？答案

【问题标题】：How to change content in a div dynamically via radio button control?如何通过单选按钮控件动态更改 div 中的内容？
【发布时间】：2019-06-21 15:59:17
【问题描述】：

我正在尝试构建一个表单，该表单将接收可能以多种不同格式（每周、每月、其他）形式出现的调度信息。我计划在表单的日程部分中设置用户通过单选按钮组选择日程类型的部分。如果选择了每周选项，则会出现一组带有工作日的复选框，以便您选择一周中的哪几天。如果是每月，则可以选择月份中的哪一天，依此类推。我曾尝试使用 *ngIf 方法使事物出现，但它不起作用，并且我没有收到任何错误消息。关于如何实现这一点的任何想法？

我正在使用： -角材料元素 -角度 2 (8) -Angular 反应形式

我已经实现了其中的一部分，下面是单选按钮的代码和我想隐藏的第一个计划部分（对代码格式不佳表示歉意，仍在弄清楚 Stack Overflow）：

<form [formGroup] = "SchedInfo" (ngSubmit)="onSubmit()">

<mat-radio-group formControlName= "sType" (ngSubmit)= "onSubmit()">
<mat-radio-button type="radio"  [value] ="true" [checked] = "value">Weekly</mat-radio-button>
<mat-radio-button type="radio"  [value] ="false" [checked] = "!value">Monthly</mat-radio-button>
</mat-radio-group>

<div class = "weeklyS" *ngIf= "sType.value">
<br>
<!-- possibly need to resturcture the section below -->
<mat-checkbox formControlName= "mo">Monday</mat-checkbox>
<mat-checkbox formControlName= "tu">Tuesday</mat-checkbox>
<mat-checkbox formControlName= "we">Wednesday</mat-checkbox>
<mat-checkbox formControlName= "th">Thursday</mat-checkbox>
<mat-checkbox formControlName= "fr">Friday</mat-checkbox>
<mat-checkbox formControlName= "sa">Saturday</mat-checkbox>
<mat-checkbox formControlName= "su">Sunday</mat-checkbox>
</div>

最后，我的目标是有一个日程模块，可以在几种不同的输入法之间切换。

还有：

我应该有一个 div 在每次更改选择时重新填充，还是应该有多个 div 根据选择显示/隐藏？

【问题讨论】：

你遇到了什么问题？
我认为您应该有多个 div 可以根据选择显示/隐藏。 *ngIf 方法是正确的。您应该使用指示每周、每月或其他的标志变量。并在 *ngIf 中检查

标签： html angular angular-material angular-reactive-forms angular-forms

【解决方案1】：

您真正需要做的是正确绑定收音机的值以及如何取回该值。这是我能想到的最简单的例子。

首先是我们的模板代码

<form [formGroup]="myForm" (submit)="onSubmit(myForm.value)" novalidate>
    <label id="example-radio-group-label">Pick your Type</label>
<mat-radio-group class="example-radio-group" formControlName="sType">
  <mat-radio-button class="example-radio-button" *ngFor="let sfType of scheduleTypes" [value]="sfType">
    {{sfType}}
  </mat-radio-button>
</mat-radio-group>


<ng-container [ngSwitch]="getScheduleType()">
<div  *ngSwitchCase="'Weekly'">
  Weekly Content
</div>
<div *ngSwitchCase="'Monthly'">
  Monthly Content
</div>
</ng-container>

</form>

现在组件代码：

   import { Component, OnChanges, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


export interface DataModel {
  sType: string;
}
/**
 * @title Radios with ngModel
 */
@Component({
  selector: 'radio-ng-model-example',
  templateUrl: 'radio-ng-model-example.html',
  styleUrls: ['radio-ng-model-example.css'],
})
export class RadioNgModelExample {
  myForm: FormGroup;

//List of the schedule types. You might want to change this to an ENUM
  scheduleTypes: string[] = ['Weekly', 'Monthly'];

  constructor(private formBuilder: FormBuilder) {
    this.buildForm();
  }

//Remember to build your form properly
  public buildForm() {
    this.myForm = this.formBuilder.group({
      sType: [null]
    });
  }

  public onSubmit(data: DataModel) {
    //Submit Data Here
  }

  public getScheduleType() {
    //Get the value of your stypeControl
    return this.myForm.controls['sType'].value;
  }


}

Live Example

【讨论】：