angular 5, reactive form- resetting a required form control does not reset the required error under the input

Question

In the template I have a form that is opened by pressing on a button-

     <form [formGroup]="person"
          (ngSubmit)="onSubmitNewPerson()"
          #formDirective="ngForm">

            <mat-form-field>
                <input matInput formControlName="firstName" required>
            </mat-form-field>

            <mat-form-field>
                <input matInput formControlName="lastName" #last required>
            </mat-form-field>
</form>

In the component I have this code-

  @ViewChild('formDirective') formDirective: FormGroupDirective;

 this.person = this.formBuilder.group({
            lastName: ['', Validators.required],
            firstName: ['', Validators.required]
        });

After closing the button I run this function-

   this.formDirective.resetForm();//hack that I saw in some question
    this.person.reset();

but after openning again the form, I immediatly see the red error under the input.

I also tried this-

    this.person.get('firstName').markAsUntouched();
   this.person.get('lastName').markAsUntouched();
     this.person.get('firstName').markAsPristine();
    this.person.get('lastName').markAsPristine();

But this does not work also.

Any idea how to fix it?