jeudi 2 septembre 2021

How to clear validation errors of mat-datepicker after submitting form?

I am working on a angular project. I want to reset some fields in the form after the form submit. reset function works properly before submit the form. I don't want to reset whole form. I tried so many ways. text input validations are cleared but datepicker validation errors are not. How i solve this?

Here is my html template

<form [formGroup]="form"
              class="px-6 py-4"
              fxLayout="column"
              novalidate
              (ngSubmit)="createOrUpdate()">
    <mat-form-field
                   class="example-chip-list"
                   fxFlex="100%"
                   appearance="outline">
           <mat-label>Employee Field</mat-label>
           <mat-select formControlName="employeeField">
                <mat-option *ngFor="let employeeField of employeeFields$ | async" [value]="employeeField">
                       
                </mat-option>
           </mat-select>
   </mat-form-field>

</form>

This is the submit function

createOrUpdate(): void {
    if (this.form.valid) {
      this.loader.setLoading(true);
      const payload = {
        id: this.selectedSalaryFieldId || undefined,
        dateFrom: this.form.value.dateFrom,
        dateTo: this.form.value.dateTo,
        approach: null,
        value: this.form.value.value,
        employee: {
          id: this.selectedEmployeeId
        },
        employeeField: this.form.value.employeeField
      };
      this.rest
          .post('salaryFieldAPI/', payload)
          .pipe(take(1))
          .subscribe(() => {
            this.snackbar.open(
                this.translate.instant(
                    this.selectedSalaryFieldId
                        ? 'Salary field updated'
                        : 'Salary field created'
                ),
                this.translate.instant('OK'),
                {
                  duration: 4000,
                }
            );
            this.loader.setLoading(false);
          }, () => {
            this.snackbar.open('Something went wrong!', 'OK', {
              duration: 4000,
            });
          }, () => {
            this.resetForm();
          });
    }
  }

This is the form reset function

resetForm(): void {
    this.selectedSalaryFieldId = null;
    this.dataSource.data = [];
    this.form.controls.dateFrom.reset();
    this.form.controls.dateFrom.setErrors(null);

    this.form.controls.dateTo.reset();
    this.form.controls.dateTo.setErrors(null);

    this.form.controls.value.reset();
    this.form.controls.value.setErrors(null);

    const value = this.form.controls.employeeField.value;
    this.validationGovernor(value);
    if (value) {
      this.fillTable(value);
    }
    console.log(this.form.controls.dateFrom.errors);
  }



Aucun commentaire:

Enregistrer un commentaire