在angular 7中组件离开后如何重置窗体

Question

我正在处理angular 7中的reactive-forms，我有3个组件，每个组件都有一个form.based on if，组件开关。我没有使用路由，只是隐藏并显示我们返回到以前的component.then angular- components.if输入，它有一个红色的border.How来删除那个边界

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();