Open
Description
Most form controls share a general structure, with a ibm-form-item
component we can standardize our label handling and reduce repitetion. We should also implement a BaseFormControl
that provides common Input
s, Output
s, and methods (such as isTemplate
)
ibm-form-item
rough sample (for ibm-select
):
<ibm-form-item
[label]="label"
[helperText]="helperText"
[invalid]="invalid"
[invalidText]="invalidText">
<div
class="bx--select-input__wrapper"
[attr.data-invalid]="(invalid ? true : null)">
<select
#select
[attr.id]="id"
[disabled]="disabled"
(change)="onChange($event)"
class="bx--select-input">
<ng-content></ng-content>
</select>
<ibm-icon-warning-filled16
*ngIf="!skeleton && invalid"
class="bx--select__invalid-icon"
style="display: inherit;">
</ibm-icon-warning-filled16>
<ibm-icon-chevron-down16
*ngIf="!skeleton"
class="bx--select__arrow"
style="display: inherit;">
</ibm-icon-chevron-down16>
</div>
</ibm-form-item>