mat-datepicker 反应式表单在表单重置时设置默认值
mat-datepicker reactive form set default value on form reset
我有一个使用 Material 的 Angular 响应式表单,我在其中使用两个 mat-datepickers 设置日期范围。
我在创建表单时设置了默认的最小日期和最大日期,一切正常。
我的问题是,当用户重置表单时,我想再次在表单中设置我的默认日期,以用于另一个查询。我试图通过从变量获取默认的最小和最大日期并使用 setValue 来实现这一点,但是默认日期没有像在 ngOnInit 中那样显示在日期选择器中。
当我登录到控制台时,值是在表单控件中设置的。为什么它们不像在 ngOnInit 上那样显示?
HTML:
<form novalidate autocomplete="off" spellcheck="false" [formGroup]="searchForm" (ngSubmit) = "submit()">
<div>
<mat-form-field appearance="outline">
<mat-label>Search Type</mat-label>
<mat-select formControlName="searchType" [errorStateMatcher]="matcher">
<mat-option *ngFor="let s of searchTypes" [value]="s">
{{s}}
</mat-option>
</mat-select>
<mat-error *ngIf="searchForm.get('searchType').hasError('required')">
Please select the search type
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="eris-ml-2">
<mat-label>{{inputLabel}}</mat-label>
<input matInput formControlName="inputText" [errorStateMatcher]="matcher">
<mat-error *ngIf="searchForm.get('inputText').hasError('required')">
This field is required.
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="eris-ml-2">
<mat-label>Event Types</mat-label>
<mat-select formControlName="eventTypes" multiple [errorStateMatcher]="matcher">
<mat-option *ngFor="let e of eventTypes" [value]="e">
<span>{{e}}</span>
</mat-option>
</mat-select>
<mat-error *ngIf="searchForm.get('eventTypes').hasError('required')">
Please select the event types you want to review.
</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="outline">
<mat-label>From Date</mat-label>
<input matInput [min]="minDate" [matDatepicker]="picker1" autocomplete="off" formControlName="beginDate">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1 color="primary"></mat-datepicker>
<mat-error *ngIf="searchForm.get('beginDate').hasError('required')">
From date is required
</mat-error>
<mat-error *ngIf="searchForm.get('beginDate').hasError('matDatepickerMin') && !searchForm.get('beginDate').hasError('required')">
From date cannot be before 11/1/2020.
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="eris-ml-2">
<mat-label>To Date</mat-label>
<input matInput [max]="defaultEndDate" [matDatepicker]="picker2" autocomplete="off" formControlName="endDate">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2 color="primary"></mat-datepicker>
<mat-error *ngIf="searchForm.get('endDate').hasError('required')">
To date is required
</mat-error>
<mat-error *ngIf="searchForm.get('endDate').hasError('matDatepickerMax') && !searchForm.get('endDate').hasError('required')">
To date cannot be greater than the current date.
</mat-error>
</mat-form-field>
</div>
<div>
<button mat-raised-button color="primary" type="submit" [disabled]="!searchForm.valid">Submit</button>
<button class="eris-ml-2" mat-raised-button color="accent" type="reset" (click)="reset()">Reset</button>
</div>
TypeScript ngOnInit:
ngOnInit(): void {
this.minDate = new Date(2020,10,1) // 11/01/2020
this.defaultEndDate = new Date();
this.defaultStartDate = new Date(2020,10,1);
const listUrl = `${this.configService.getSettings().azureApiBaseUri}/api/auditlog/eventtypes/list`;
this.http.get<string[]>(listUrl).subscribe(data => {
this.eventTypes = data;
})
this.searchForm = this.formBuilder.group({
searchType: ['', [Validators.required]],
inputText: [{ disabled: true, value: null}, requiredIfValidator(() => ((this.searchForm.get('searchType').value !== 'EventType') && (this.searchForm.get('searchType').value !== '')))],
eventTypes: [{ disabled: true, value: null}, requiredIfValidator(() => this.searchForm.get('searchType').value === 'EventType')],
beginDate: [this.defaultStartDate, Validators.required],
endDate: [this.defaultEndDate, Validators.required]
})
}
重置方法,打字稿:
reset(): void {
// clear the form, then set the default dates.
this.searchForm.reset();
this.searchForm.get('beginDate').setValue(this.defaultStartDate);
this.searchForm.get('endDate').setValue(this.defaultEndDate);
}
我想我有适合您的解决方案。您的 <button class="eris-ml-2" mat-raised-button color="accent" type="reset" (click)="reset()">Reset</button>
重置按钮有问题。这里 type="reset"
主要问题是您无法正确重置数据。因此,您已从按钮中删除该部分,按钮将看起来像 <button class="eris-ml-2" mat-raised-button color="accent" (click)="reset()">Reset</button>
。
注意:我已经在 stackblitz 中测试了你的部分代码,我的代码在那里工作。请检查 link Stackblitz Link
我有一个使用 Material 的 Angular 响应式表单,我在其中使用两个 mat-datepickers 设置日期范围。 我在创建表单时设置了默认的最小日期和最大日期,一切正常。
我的问题是,当用户重置表单时,我想再次在表单中设置我的默认日期,以用于另一个查询。我试图通过从变量获取默认的最小和最大日期并使用 setValue 来实现这一点,但是默认日期没有像在 ngOnInit 中那样显示在日期选择器中。 当我登录到控制台时,值是在表单控件中设置的。为什么它们不像在 ngOnInit 上那样显示?
HTML:
<form novalidate autocomplete="off" spellcheck="false" [formGroup]="searchForm" (ngSubmit) = "submit()">
<div>
<mat-form-field appearance="outline">
<mat-label>Search Type</mat-label>
<mat-select formControlName="searchType" [errorStateMatcher]="matcher">
<mat-option *ngFor="let s of searchTypes" [value]="s">
{{s}}
</mat-option>
</mat-select>
<mat-error *ngIf="searchForm.get('searchType').hasError('required')">
Please select the search type
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="eris-ml-2">
<mat-label>{{inputLabel}}</mat-label>
<input matInput formControlName="inputText" [errorStateMatcher]="matcher">
<mat-error *ngIf="searchForm.get('inputText').hasError('required')">
This field is required.
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="eris-ml-2">
<mat-label>Event Types</mat-label>
<mat-select formControlName="eventTypes" multiple [errorStateMatcher]="matcher">
<mat-option *ngFor="let e of eventTypes" [value]="e">
<span>{{e}}</span>
</mat-option>
</mat-select>
<mat-error *ngIf="searchForm.get('eventTypes').hasError('required')">
Please select the event types you want to review.
</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="outline">
<mat-label>From Date</mat-label>
<input matInput [min]="minDate" [matDatepicker]="picker1" autocomplete="off" formControlName="beginDate">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1 color="primary"></mat-datepicker>
<mat-error *ngIf="searchForm.get('beginDate').hasError('required')">
From date is required
</mat-error>
<mat-error *ngIf="searchForm.get('beginDate').hasError('matDatepickerMin') && !searchForm.get('beginDate').hasError('required')">
From date cannot be before 11/1/2020.
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="eris-ml-2">
<mat-label>To Date</mat-label>
<input matInput [max]="defaultEndDate" [matDatepicker]="picker2" autocomplete="off" formControlName="endDate">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2 color="primary"></mat-datepicker>
<mat-error *ngIf="searchForm.get('endDate').hasError('required')">
To date is required
</mat-error>
<mat-error *ngIf="searchForm.get('endDate').hasError('matDatepickerMax') && !searchForm.get('endDate').hasError('required')">
To date cannot be greater than the current date.
</mat-error>
</mat-form-field>
</div>
<div>
<button mat-raised-button color="primary" type="submit" [disabled]="!searchForm.valid">Submit</button>
<button class="eris-ml-2" mat-raised-button color="accent" type="reset" (click)="reset()">Reset</button>
</div>
TypeScript ngOnInit:
ngOnInit(): void {
this.minDate = new Date(2020,10,1) // 11/01/2020
this.defaultEndDate = new Date();
this.defaultStartDate = new Date(2020,10,1);
const listUrl = `${this.configService.getSettings().azureApiBaseUri}/api/auditlog/eventtypes/list`;
this.http.get<string[]>(listUrl).subscribe(data => {
this.eventTypes = data;
})
this.searchForm = this.formBuilder.group({
searchType: ['', [Validators.required]],
inputText: [{ disabled: true, value: null}, requiredIfValidator(() => ((this.searchForm.get('searchType').value !== 'EventType') && (this.searchForm.get('searchType').value !== '')))],
eventTypes: [{ disabled: true, value: null}, requiredIfValidator(() => this.searchForm.get('searchType').value === 'EventType')],
beginDate: [this.defaultStartDate, Validators.required],
endDate: [this.defaultEndDate, Validators.required]
})
}
重置方法,打字稿:
reset(): void {
// clear the form, then set the default dates.
this.searchForm.reset();
this.searchForm.get('beginDate').setValue(this.defaultStartDate);
this.searchForm.get('endDate').setValue(this.defaultEndDate);
}
我想我有适合您的解决方案。您的 <button class="eris-ml-2" mat-raised-button color="accent" type="reset" (click)="reset()">Reset</button>
重置按钮有问题。这里 type="reset"
主要问题是您无法正确重置数据。因此,您已从按钮中删除该部分,按钮将看起来像 <button class="eris-ml-2" mat-raised-button color="accent" (click)="reset()">Reset</button>
。
注意:我已经在 stackblitz 中测试了你的部分代码,我的代码在那里工作。请检查 link Stackblitz Link