时间戳

首页 > 解决方案 > 如何设置表单输入字段的值并重新检查其表单验证错误

angular - 如何设置表单输入字段的值并重新检查其表单验证错误

问题描述

:)

我正在编写一个带有角度材料的 angular8 网络应用程序。

我ReactiveForms用来构建一个FormGroup以验证它的字段。

我有两个字段To Date，To Time如果我尝试在没有填写它们的情况下提交表单，用户会看到一个错误，表明他需要填写这些值。

在它们下面我有一个按钮Now，可以很好地设置日期和时间字段.. 到现在:)

如果我先按提交，得到<mat-error>下面的消息它们是空的，然后按“现在”按钮，这些字段正在填充，但错误消息不会消失。有没有办法专门重新测试这两个表单字段？

这是我的表单，带有输入元素的相关代码和现在按钮：

<form [formGroup]="queryForm" (submit)="runQuery()">
...
        <div fxLayout="column wrap">
            <div fxLayout="row wrap">
                <mat-form-field>
                    <input matInput #toDate [matDatepicker]="toDatePicker" (focus)="toDatePicker.open()" placeholder="To Date" formControlName="datePeriodTo" />
                    <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
                    <mat-datepicker #toDatePicker></mat-datepicker>
                    <mat-error>{{getError('datePeriodTo')}}</mat-error>
                </mat-form-field>
                <mat-form-field>
                    <input matInput #toTime [ngxTimepicker]="toTimePicker" placeholder="To Time" aria-label="To Time" formControlName="timePeriodTo">
                    <ngx-material-timepicker #toTimePicker></ngx-material-timepicker>
                    <mat-error>{{getError('timePeriodTo')}}</mat-error>
                </mat-form-field>
            </div>
            <div fxLayout="row wrap" fxLayoutAlign="center">
                <button mat-raised-button type="button" (click)="toDate.value=currentDate.format('D/M/YYYY'); toTime.value=currentDate.format('hh:mm a')">Now</button>
            </div>
        </div>
...
</form>

我的getError()函数只是解析错误并显示相关的错误消息：

 getError(field: string) {
    const control = this.queryForm.get(field);
    return control.hasError('required') ? 'field is required' :
        control.hasError('greaterThen') ? 'range values not valid' :
            control.hasError('lessThen') ? 'range values not valid' :
                control.hasError('min') ? 'value is below minimum' :
                    control.hasError('max') ? 'value is above maximum' :
                        !control.valid ? 'unknown error' :
                '';
  }

所以总的来说我想要发生的事情是，如果这些表单字段已经出现错误并且我按下Now按钮以便将它们填充到当前日期或时间..重新检查验证，如果不可能，只是不显示这些错误，因为它们不再相关！

我知道当我按下Now按钮时我可以专门删除 mat-error 字段中的文本，但我会假设 angular 有一个.. more .. 一个更好的处理方法？

谢谢！:)

标签： angularformsangular-materialangular8

解决方案

使用 Angular 反应式表单时，您需要使用反应式表单 api。在这种特殊情况下，您可以使用pathcValue https://angular.io/api/forms/FormGroup#patchvalue，因为它只能设置值的子集。

我还建议将您的点击事件处理程序移动到一个单独的函数中：

<button mat-raised-button type="button" (click)="setCurrentDate()">Now</button>

在你的组件中

private setCurrentDate() {
   this.queryForm.patchValue({
      datePeriodTo: currentDate.format('D/M/YYYY'),
      timePeriodTo: currentDate.format('hh:mm a')
   });
}

推荐阅读