Remove CSS on successful submission of a form using Reactive Form Angular-CodePudding

I am trying to remove below CSS from elements on successful submission of a form. I am currently using Reactive Form in Angular and I have used the below CSS to show red left border along with bold Font if value is invalid

.form-control.ng-dirty:not(form) {
font-weight: bolder;
border-left: 5px solid #42A948; /*green*/
}

.form-control.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}

When I click save, I want to remove the css (that I applied to show the user that the current value will be updating by changing the font to bolder and left border to green). I am a little bit struggling with this. I tried using temp variable but that doesn't work. Tried passing the $event variable from the onSubmit but that also not helping

HTML

<form [formGroup]="formEquipments" (ngSubmit)="onSubmit(formEquipments, $event)">
    <table >
        <thead *ngIf="parameterModels?.length > 0">
            <tr>
                <th style="padding-left:30px" *ngFor="let paramType of solverParameterHeader; let i = index">
                    <div >
                        {{paramType}}
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <ng-container formArrayName="equipmentArray"
                          *ngFor="let paramTypes of formEquipments.get('equipmentArray')['controls']; let i = index">
                <tr [formGroupName]="i">                        
                    <td formArrayName="entityAttributeInfo" *ngFor="let item of paramTypes.controls.entityAttributeInfo.controls; let ii = index;">
                        <div [formGroupName]="ii" >
                            <input #varData formControlName="value" >
                        </div>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>
</form>

typescript

async onSubmit(formGroup, target) {
    //remove the css after successful submission of the form. 
}

CodePudding user response：

I guess what you are looking for is to change button css based on your form status. You can change button css using ngClass in angular Here is a working demo of it

CodePudding user response：

@Running Rabbit, I have updated the answer a bit, could you please have a look if its satisfies your requirement. Click here

Working demo