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