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

Question

:)

我正在使用 angular material 编写一个 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 按钮时专门删除垫错误字段中的文本，但我认为 angular 有一个..更多..更好的方法处理它？

谢谢！ :)

Answer 1

您可以将它们视为可观察对象并订阅它们，一旦它们的值发生变化，就将相应字段的 hasError 设置为 false

Answer 2

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

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

how to set value of form input fields and re-check their form validation errors

forms

angular-material

angular

angular8