Form stays invalid after submission angular 9

Question

I am new to angular and just making a small demo application in angular 9 and coreui admin template. I have a simple form with one textbox and one disabled button. On page load the form classes are this

<form _ngcontent-bcs-c113="" novalidate="" 
class="form-horizontal ng-untouched ng-pristine ng-invalid" ng-reflect-form="[object Object]">
</form>

after entering some text in textbox my form looks like this -

<form _ngcontent-ruw-c113="" novalidate="" 
class="form-horizontal ng-dirty ng-valid ng-touched" ng-reflect-form="[object Object]">
</form>

since the form is valid button enables and I can submit the form. Now there is a table below form with one edit button. On editing I fill the form with row data and can submit it again as button is enabled. On edit click my form look like this.

<form _ngcontent-ruw-c113="" novalidate="" 
class="form-horizontal ng-valid ng-untouched ng-pristine" ng-reflect-form="[object Object]">
</form>

Since form is valid button is enabled and I can update data. After submitting form, my form looks like this

<form _ngcontent-ruw-c113="" novalidate="" 
class="form-horizontal ng-untouched ng-pristine ng-invalid" ng-reflect-form="[object Object]">
</form>

Now my form is invalid again and button is disabled. But when I enter something in textbox to submit data again, even though validation are passed my form remains invalid and button stays disabled, like this

    <form _ngcontent-ruw-c113="" novalidate="" 
     class="form-horizontal ng-invalid ng-dirty ng-touched" ng-reflect-form="[object Object]">
    </form>

In my component I reset my form after insert and update like this ---

this.rolesForm.reset(true);
 this.rolesForm.markAsPristine();

Everywhere I searched I got this as a solution and although it does reset my textbox value to empty after submission but not solving my problem. Please let me know If I need to give more information.

stackblitz link -

https://stackblitz.com/edit/create-obwnjo?file=app/app.component.html

Can you show your HTML and all relevant code? It would be pure guesswork to figure out what's wrong at the moment. — Kurt Hamilton
@prince I have shared a stackblitz link. Enter some data and save after that click on edit iand edit function will run and finish. After that enter some data again in textbox the button will stay disabled. — Sanjay Kumar
Did you check, stackblitz is working as expected. Am I missing something? Can you please update your question with steps to follow to replicate the issue. — Jasdeep Singh

Jasdeep Singh Jasdeep Singh · Accepted Answer · 2020-04-05T07:43:23

The issue is with the edit button, you need to mark it as type="button". Right now as soon as you click on edit button, it call edit() method as well as create() method.

And one more thing you do not need to create a new formGroup when user clicks on edit button. Changes you need to do are the following:

<button class="btn btn-sm btn-danger" type="button" (click)="edit($event)"> Edit</button>

I have also done changes in component class file. Please find working stackblitz here: https://stackblitz.com/edit/create-2gqm2q

Form stays invalid after submission angular 9

1 Answers