如何在组件离开角度7后重置表格

Question

我正在处理角度为7的反应式表单。我有3个组件，每个组件都有一个表单。基于if，components开关。我不使用路线，只是隐藏并显示组件。上一个组件。然后角材料输入具有红色边框。如何删除该边框

dashboard.component.ts（父）

<section>
  <mat-card class="auth-card">

    <mat-card-content>
      <div [ngStyle]="componentConst.showAcc ? {'display':'block'} : {'display':'none'}" id="acc ">
        <app-account (showStep)="onNextStepShow($event)"></app-account>
      </div>
      <div [ngStyle]="componentConst.showC ? {'display':'block'} : {'display':'none'}" id="cred ">
        <app-cred (showNextStep)="onNext($event)" (showStip)="onShowPrev()"></app-cred>
      </div>

appaccount.ts

    <form [formGroup]="providerForm" (ngSubmit)="onSubmit()">
      <div class="form-control">
        <mat-form-field>
          <input  type="text" placeholder="Provider" matInput [matAutocomplete]="auto"
            formControlName="providerName">
          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChanged($event)">
            <mat-option *ngFor="let providerItem of providersData" [value]="providerItem.providerName">
              {{providerItem.providerName}}</mat-option>
            <mat-option *ngIf="providersData.length===0  && isSearching!='false'" disabled>Begin typing to search...
            </mat-option>
          </mat-autocomplete>
          <mat-error *ngIf="submitted && formControl.providerName.errors">
            <mat-error *ngIf="formControl.providerName.errors.required"> * Provider is required</mat-error>
          </mat-error>
        </mat-form-field>
      </div>
      <div class="button-section">
        <button mat-button [disabled]="!isSelected">Next</button>
      </div>
    </form>

Answer 1

在切换时间，您应该重置表格。因此在那一次重置但触摸表单字段时，由于验证，您将得到一个红色边框。在表单事件之间的切换之间添加此代码。

this.providerForm.reset()
providerForm.markAsPristine();
providerForm.markAsUntouched();