Question

：）

我正在用有角度的材料编写一个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有一个..更多..一种更好的方式来处理它？</ p >

谢谢！：）

Answer 1

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

Answer 2

您可以将它们视为可观察对象并订阅它们，一旦它们的值更改，则将对应字段的hasError设置为false

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

2 个答案: