Angular 6 form returns validation error after submit and reset

I'm using angular 6 and I have a form and a button. When I press the button the app shows the form data above the form and I call form.reset(). But after form reset the input fields become red because I set the fields required in my form. Where is the problem?

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