<form class="input-top" [formGroup]="searchForm" >/*在form表单中使用formGroup定义一个名称*/ <mat-form-field color="primary" appearance="outline"> <mat-label>查询开始时间</mat-label> <input matInput type="text" maxlength="40" formControlName="startPicker"/*定义字段名称*/ [matDatepicker]="startPicker" placeholder="查询开始日期" formControldigital="startTime"> <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle> <mat-datepicker #startPicker></mat-datepicker> </mat-form-field> <mat-form-field color="primary" appearance="outline"> <mat-label>查询结束时间</mat-label> <input matInput type="text" maxlength="40" formControlName="endPicker" [matDatepicker]="endPicker" placeholder="查询开始日期" formControldigital="startTime"> <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle> <mat-datepicker #endPicker ></mat-datepicker> </mat-form-field> <notadd-query-month (monthDate)="onMonthClick($event)" [disableDate]="{startDate: searchForm.value.startPicker , endDate: searchForm.value.endPicker}"> ></notadd-query-month> <div class="example-button-row right"> <button mat-raised-button color="primary" (click)="onView()" > <mat-icon> visibility </mat-icon> 查看报表 </button> </div> </form>
import { FormGroup, FormBuilder, AbstractControl , FormControl } from '@angular/forms';/*导入FormGroup等*/
constructor(
private formBuilder: FormBuilder/*将FormBuilder注册*/
) {
this.nav = 0;
this.searchForm = this.formBuilder.group({/*定义字段*/
startPicker: '',
endPicker: ''
});
}
get startPicker(): AbstractControl { return this.searchForm.get('startPicker'); } get endPicker(): AbstractControl { return this.searchForm.get('endPicker'); }/*获取定义字段数据*/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。