如何通过单选按钮控件动态更改 div 中的内容?
How to change content in a div dynamically via radio button control?
我正在尝试构建一个表单,该表单将接收可能以多种不同格式(每周、每月、其他)提供的日程安排信息。我正计划在表单的日程表部分中设置用户 select 通过单选按钮组选择日程表的类型。如果选择每周选项,将出现一组带有工作日的复选框,因此您可以 select 一周中的几天。如果是每月,则可以选择该月的哪一天,依此类推。我已经尝试使用 *ngIf 方法来显示内容,但它不起作用,而且我没有收到任何错误消息。关于如何实现这个的任何想法?
我正在使用:
-Angular material 个元素
-Angular 2 (8)
-Angular 反应形式
我已经实现了一部分,下面是单选按钮的代码和我想隐藏的第一个计划部分(很抱歉代码格式不佳,仍在计算堆栈溢出):
<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 随着 selection 的每次变化而重新填充,或者我是否应该有多个 div 显示/隐藏取决于 selection?
你真正需要做的是正确绑定你的radio的值,以及如何取回该值。这是我能想出的最简单的例子。
首先是我们的模板代码
<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;
}
}
我正在尝试构建一个表单,该表单将接收可能以多种不同格式(每周、每月、其他)提供的日程安排信息。我正计划在表单的日程表部分中设置用户 select 通过单选按钮组选择日程表的类型。如果选择每周选项,将出现一组带有工作日的复选框,因此您可以 select 一周中的几天。如果是每月,则可以选择该月的哪一天,依此类推。我已经尝试使用 *ngIf 方法来显示内容,但它不起作用,而且我没有收到任何错误消息。关于如何实现这个的任何想法?
我正在使用: -Angular material 个元素 -Angular 2 (8) -Angular 反应形式
我已经实现了一部分,下面是单选按钮的代码和我想隐藏的第一个计划部分(很抱歉代码格式不佳,仍在计算堆栈溢出):
<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 随着 selection 的每次变化而重新填充,或者我是否应该有多个 div 显示/隐藏取决于 selection?
你真正需要做的是正确绑定你的radio的值,以及如何取回该值。这是我能想出的最简单的例子。
首先是我们的模板代码
<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;
}
}