I am using Angular8 with Reactive form. Initially I'm disabling the Submit button until the entire form is filled with valid data.
<div>
<form>
...........
</for>
<button [disabled]="checkifSaveEnabled() || submitted"
(click)="createNewPlan()">Save</button>
</div>
In the class (TS) file:
checkifSaveEnabled() {
if (this.formCreateNewPlan.pristine || !this.formCreateNewPlan.valid) {
return true;
}
return false;
}
createNewPlan(): void {
this.submitted = true;
this.myservice.create(this.formCreateNewPlan.value).subscribe(result => {
if (result.success && result.data.planId > 0) {
...
}
}
Here,
What I want is - After submitting, If I get an error from API (say "Duplicate Record"), I need to do some corrections in Form Values. After making corrections, I need to enable the button again second time. How to do this?
I resolved this by adding Form Subscription under finalize()
createNewPlan(): void {
this.myservice.create(this.formCreateNewPlan.value)
.pipe(finalize(() => {
this.formCreateNewPlan.valueChanges.subscribe(v =>
{
if (v.name) {
this.submitted = false;
}
});
}))
.subscribe(result => {
if (result.success && result.data.planId > 0) {
...
this.submitted = false;
}
}