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

debugcn 发表于 Dev

ufk

我正在用 angular 材料编写一个 angular8 网络应用程序。

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

我有两个领域To Date，并To Time说如果我尝试提交表单没有他们填充，用户会看到一个错误，表示他需要填补这些值。

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

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

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

<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 有……更多……更好的处理方式？

谢谢！:)

安德烈·米哈尔丘克

使用 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')
   });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。