Angular form validation - display error in another row/div

The current error message displays just below the text box. But I want to display it in the entire row below to the label and text box

I tried it by moving the div like below, but it doesn't work. I see the css for invalid-feedback is still display: none. It should change to display: block or remove

<div class="form-group">    <div class="row">      <div class="col-sm">          <label>First Name</label>      </div>      <div class="col-sm">          <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />      </div>    </div>    <div class="row">      <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">          <div *ngIf="f.firstName.errors.required">First Name is required</div>      </div>    </div>  </div>  

If I make the code change as above, I don't get the error message, but I still get the border of the text box red.

Expect: The error message should display like below as shown in the picture

https://stackblitz.com/edit/angular-7-reactive-form-validation-jhuxvm

https://stackoverflow.com/questions/66551236/angular-form-validation-display-error-in-another-row-div March 10, 2021 at 12:47AM