Validations not being reset after submit - forms

Question

After i submit the form and re-initialize the form it still doesn't reset the validations. I have tried multiple solution but it still does not work
this.form.markAsPristine();
this.form.markAsUntouched();
this.form.updateValueAndValidity();
this.form.clearValidators();
this.form.clearAsyncValidators();
None of this actually do the job.
This is my html code:
<form [formGroup]="form">
<div class="row">
<mat-form-field style="margin-top: 20px; margin-left: 20px">
<input [errorStateMatcher]="matcher" formControlName="name" matInput placeholder="Prescurtare">
<mat-error *ngIf="form.controls['name'].hasError('required')">
Introduceti o valoare
</mat-error>
</mat-form-field>
</div>
<div class="row">
<mat-form-field style="margin-top: 20px; margin-left: 20px">
<input formControlName="fullName" matInput placeholder="Nume complet">
<mat-error *ngIf="form.controls['name'].hasError('required')">
Introduceti o valoare
</mat-error>
</mat-form-field>
</div>
<div class="col-xs-12" formArrayName="groups">
<label for="imagePath">Grupe</label>
<button mat-icon-button color="primary" (click)="addNewDepartment()">
<mat-icon aria-label="Example icon-button with a heart icon">add</mat-icon>
</button>
<div class="row" *ngFor="let ingredientCtrl of form.get('groups').controls; let i = index" [formGroupName]="i" style="margin-top: 10px;">
<mat-form-field style="margin-left: 50px">
<input formControlName="name" matInput placeholder="Nume">
<mat-error *ngIf="form.get('groups').controls[i].hasError('required')">
Introduceti o valoare
</mat-error>
</mat-form-field>
<mat-form-field style="margin-left: 50px">
<input formControlName="year" matInput placeholder="Anul" [matAutocomplete]="auto">
<mat-error *ngIf="form.get('groups').controls[i].hasError('required')">
Introduceti o valoare
</mat-error>
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
</mat-autocomplete>
<div class="col-xs-2">
<button mat-icon-button color="accent" (click)="onDeleteDepartment(i)">
<mat-icon aria-label="Delete">delete</mat-icon>
</button>
</div>
</div>
</div>
<button type="submit" [disabled]="!form.valid" (click)="onSubmit()" class="btn btn-success" style="margin-top: 20px">Salveaza</button>
</form>
My typescript code:
form: FormGroup;
private initForm() {
let name = '';
let fullName = '';
const groups = new FormArray([], [Validators.required]);
this.form = new FormGroup(
{
'name': new FormControl(name, [Validators.required]),
'fullName': new FormControl(fullName, [Validators.required]),
'groups': groups
});
this.matcher = new DepartmentStateMatcher();
}
onSubmit() {
this.dataService.addDepartment(this.form.value);
this.resetForm();
setTimeout(() => { this.exampleDatabase.departmentsChange.value.push(this.dataService.getDialogData()); this.refreshTable(); }, 100);
}
private resetForm() {
this.form.markAsPristine();
this.form.markAsUntouched();
this.form.updateValueAndValidity();
this.form.clearValidators();
this.form.clearAsyncValidators();
let name = '';
let fullName = '';
const groups = new FormArray([], [Validators.required]);
this.form = new FormGroup(
{
'name': new FormControl(name, [Validators.required]),
'fullName': new FormControl(fullName, [Validators.required]),
'groups': groups
});
this.matcher = new DepartmentStateMatcher();
}
export class DepartmentStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
I would expect that validations would be reset but they are not.