Angular：重新初始化反应形式材料

Question

我的表单有一个问题，其中包含来自材料库的一个输入。

当我提交表单时，我在提交方法中像这样重置它：

onSubmitPriceForm() {
      // to do......
      this.priceForm.reset();
    }

}

问题是表单在验证后显示如下：

我希望该领域恢复到照片 1 中的原始状态

我该怎么做？

谢谢！

编辑这里的验证器：

initPriceForm() {
    this.priceForm = this.formBuilder.group({
      price: ['', [Validators.required, Validators.pattern(this.pricePattern)]]
    });
  }

新编辑：这里是表单 html ：

<form [formGroup]="priceForm" (ngSubmit)="onSubmitPriceForm()">
            <div class="edit-price-form">
                <mat-form-field appearance="outline" errorState="false">
                    <mat-label>{{ 'PRIX_TTC.NOUVEAU_PRIX_TTC' | translate }}</mat-label>
                    <input matInput name="price" autocomplete="off" formControlName="price" required>
                </mat-form-field>
    
                <button type="button" mat-mini-fab color="primary">
                    <mat-icon>done</mat-icon>
                </button>
            </div>
        </form>

Answer 1

<块引用>

默认情况下，当控件无效时显示这些错误信息 并且用户已与（触摸）该元素或 父表单已提交

您可以使用 customError 匹配器更改此行为

component.ts

thisString

component.html

delay 0.5

Working Example