mat-datepicker 反应式表单在表单重置时设置默认值

Posted

技术标签:

【中文标题】mat-datepicker 反应式表单在表单重置时设置默认值【英文标题】:mat-datepicker reactive form set default value on form reset 【发布时间】:2021-05-07 01:05:01 【问题描述】:

我有一个使用 Material 的 Angular Reactive Form,我正在使用两个 mat-datepicker 设置日期范围。 我在创建表单时设置了默认的最小日期和最大日期,一切正常。

我的问题是,当用户重置表单时,我想再次在表单中设置我的默认日期,以进行另一个查询。我试图通过从变量中获取默认的最小和最大日期并使用 setValue 来做到这一点,但是默认日期没有像在 ngOnInit 中那样显示在 datepickers 中。 当我登录到控制台时,值正在表单控件中设置。为什么它们不像在 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);
 

【问题讨论】:

嘿,我想我找到了解决方案,请检查答案并告诉我。最良好的祝愿:) 【参考方案1】:

我想我有适合你的解决方案。 &lt;button class="eris-ml-2" mat-raised-button color="accent" type="reset" (click)="reset()"&gt;Reset&lt;/button&gt; 的重置按钮有问题。这里type="reset" 的主要问题是您无法正确重置数据的原因。因此,您已经从按钮中删除了该部分,按钮将看起来像 &lt;button class="eris-ml-2" mat-raised-button color="accent" (click)="reset()"&gt;Reset&lt;/button&gt;注意:我已经在 stackblitz 中测试了您的部分代码,并且我的代码在那里工作。请查看链接Stackblitz Link

【讨论】:

你是对的。这就是我最终做的。感谢您的回复。

以上是关于mat-datepicker 反应式表单在表单重置时设置默认值的主要内容,如果未能解决你的问题,请参考以下文章

如何在角度 2 中以反应形式重置验证器?

Reactive Form valueChanges observable 重置表单值

带有 [ngmodel] 的 Angular 材料 2 日期选择器

在 ClearTextOnFocus 之后反应原生重置 TextInput

反应:如何从点击处理程序设置焦点

.reset()清除表单但不删除验证