I have come up with a solution to my issue:
http://codepen.io/helloworld/pen/QpRxNr?editors=1100
I am trying to display 2 inputs, each with an error message, in a table column.
The current design is too elongated for my liking to fit in just ONE table column.
My goal is to have the 2 inputs placed next to each other, with their respective error messages aligned directly below and to the left of them.
Similar to the mockup I created where both fields are empty:
https://i.sstatic.net/DnYTD.png
Is there a way to achieve this layout?
The solution needs to ensure that both inputs occupy the full width of the table column. I am not keen on using a bootstrap container->row->2-columns approach as it would introduce margins/paddings on the sides of the table column.
I would prefer a flexbox solution that can leverage the bootstrap flex utilities :-)
<table>
<td [formGroup]="customerForm" style="display:flex">
<input class="form-control" placeholder="First name" type="text" formControlName="firstName" />
<div *ngIf="customerForm.controls.firstName.touched">
<div class="form-error" *ngIf="customerForm.controls.firstName.hasError('required')">
First name is required.
</div>
</div>
<input class="form-control" placeholder="Last name" type="text" formControlName="lastName" />
<div *ngIf="customerForm.controls.lastName.touched">
<div class="form-error" *ngIf="customerForm.controls.lastName.hasError('required')">
Last name is required.
</div>
</div>
</td>
</table>