Home:ALL Converter>Remove CSS on successful submission of a form using Reactive Form Angular

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

Ask Time:2022-07-08T16:23:25         Author:Running Rabbit

Json Formatter

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 class="tableInfo">
        <thead *ngIf="parameterModels?.length > 0">
            <tr>
                <th style="padding-left:30px" *ngFor="let paramType of solverParameterHeader; let i = index">
                    <div class="tableheaders">
                        {{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" class="tabledataEquipmentNameInfo">
                            <input #varData formControlName="value" class="form-control">
                        </div>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>
</form>

typescript

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

Author:Running Rabbit,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/72908632/remove-css-on-successful-submission-of-a-form-using-reactive-form-angular
yy