CODEWITHSUNDEEP
angularformsvalidationangular9
Sanjay Kumar
Sanjay Kumar

Reputation: 345

Form stays invalid after submission angular 9

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

Upvotes: 0

Views: 708

Answers (1)

Jasdeep Singh
Jasdeep Singh

Reputation: 8301

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

Upvotes: 1

Related Questions