<div class="col-lg-4 col-md-6 col-sm-6 form-group"
[ngClass]="{ 'has-error': submitted && userFormControls.userName.errors || userFormControls.userName.errors && (userFormControls.userName.dirty || userFormControls.userName.touched) }">
<label for="userName" class="labelText"><span
[translate]="'userconfiguration.label.userName'"></span><span class='redIcon'> *</span></label>
<input type="text" class="form-control uppercase" id="userName" formControlName="userName"
title="{{ 'userconfiguration.placeholder.username' | translate }}"
placeholder="{{ 'userconfiguration.placeholder.username' | translate }}" maxlength="10"
autocomplete="username" />
<div
*ngIf="submitted && userFormControls.userName.errors || userFormControls.userName.errors && (userFormControls.userName.dirty || userFormControls.userName.touched) "
class="help-block red">
<div *ngIf="userFormControls.userName.errors.required">
<span [translate]="'userconfiguration.error.user.required'"></span></div>
<div *ngIf="userFormControls.userName.errors.duplicateCode">
<span [translate]="'userconfiguration.error.user.duplicate'"></span>
</div>
</div>
</div>
when i include all 10 fields within the single row. Each fields will be same as the above code. when anyone of the field has error message . the second row fields moves to the next position since the error message occupies the space. can you provide a solution for this??