angular(formGroup)

<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 * /

  

  

Guess you like

Origin www.cnblogs.com/cx19950223/p/11635046.html