<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');
}/*獲取定義字段數據*/