Как сбросить форму после ухода компонента в angular 7

Question

Я работаю над реактивными формами в angular 7. У меня есть 3 компонента, и у каждого компонента есть форма. На основе компонентов переключаются if. Я не использую маршруты, просто скрываю и показываю компоненты. к предыдущему компоненту. тогда у углового материала есть красная граница. Как удалить эту границу

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