<form class = "input-top " [formGroup] = "searchForm"> / * used to define a name formGroup * / form in the form <MAT-Color Field-form = "Primary" Appearance = "Outline"> <MAT- label> query start time </ MAT-label> <INPUT matInput type = "text" MAXLENGTH = "40" formControlName = "startPicker" / * custom field names * / [matDatepicker] = "startPicker" placeholder = "query start date" = formControldigital "the startTime"> <Toggle-MAT-datepicker with matSuffix [for] = "startPicker"> </ datepicker with MAT-Toggle-> <datepicker with MAT-#startPicker> </ datepicker with MAT-> </mat-form-field> <mat-form-field color="primary" appearance="outline"> <MAT-label> query end time </ 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> View Report </ the Button> </ div> </ form>
import { FormGroup, FormBuilder, AbstractControl , FormControl } from '@angular/forms';/*导入FormGroup等*/
constructor (
Private FormBuilder: FormBuilder / * * Registration will FormBuilder /
) {
This.nav = 0;
this.searchForm = this.formBuilder.group ({/ * defined field * /
startPicker: '',
endPicker: ''
});
}
startPicker GET (): AbstractControl { return this.searchForm.get ( 'startPicker'); } GET endPicker (): AbstractControl { return this.searchForm.get ( 'endPicker'); } / * Get the definition field data * /