Форма Angular 6 возвращает ошибку проверки после отправки и сброса

Question

Я использую угловой 6, и у меня есть форма и кнопка. Когда я нажимаю кнопку, приложение показывает данные формы над формой, и я звоню form.reset(), Но после сброса формы поля ввода становятся красными, потому что я установил поля, требуемые в моей форме. В чем проблема?

app.html

<form [formGroup]='fuelForm'>
      <mat-form-field class="input input2">
        <input matInput placeholder="Nozzle name" formControlName="nozzleName">
      </mat-form-field>
      <mat-form-field class="input input2">
        <input matInput type="number" min="1" id="nozzleNumber" formControlName="nozzleNumber" placeholder="Nozzle number"  >
      </mat-form-field>
      <mat-form-field class="input input4">
        <mat-select placeholder="Fuel type" formControlName="fuelType">
          <mat-option *ngFor="let item of fuelList" [value]="item">{{item}}</mat-option>
        </mat-select>
      </mat-form-field>
      <button mat-icon-button class="circle_button" (click)="add()">
        <mat-icon class="plus_icon">add_circle_outline</mat-icon>
      </button>
    </form>

app.ts

export class DialogNozzleComponent {

fuelForm :FormGroup;

  fuelList = ['Petrol', 'Super petrol', 'Euro4 petrol', 'Gasoline', 'Euro4 gasoline'];
  nozzleItem = [
    {
      nozzleName: 'Nozzle',
      nozzleNumber: '1',
      fuelType: 'Super petrol'
    },
    {
      nozzleName: 'Nozzle',
      nozzleNumber: '2',
      fuelType: 'Gasoline'
    }
  ];

  constructor(public fb : FormBuilder) { 
    this.fuelForm = fb.group({
      nozzleName: {value:'Nozzle', disabled: true},
      nozzleNumber: [null, Validators.required],
      fuelType: [null, Validators.required]
    });
  }

  add() {
    const formValue = this.fuelForm.value;
    formValue.nozzleName = this.fuelForm.controls['nozzleName'].value;
    this.nozzleItem.push(formValue);
    this.fuelForm.controls['nozzleNumber'].reset();
    this.fuelForm.controls['fuelType'].reset();
  }
}

Answer 1

Ты пытался

this.fuelForm.reset();
this.fuelForm.markAsPristine();