Overview
tng-form-field is a wrapper that provides a label, optional hint, and error text. It projects a single form control (e.g. tng-text-input, tng-select) and optionally binds to its NgControl for automatic touched/invalid/error display. Supports tngPrefix and tngSuffix.
Quick example
Basic
<form [formGroup]="form">
<tng-form-field label="Email" hint="We'll never share your email.">
<tng-text-input formControlName="email" placeholder="[email protected]" />
</tng-form-field>
</form>
form = new FormGroup({
email: new FormControl('', { validators: [Validators.required, Validators.email] }),
});
Form-field binds to the control and can show validator errors when touched.
Features
Auto NgControl
When the projected control has formControlName or ngModel, form-field can show error text from validators and touched state.
Manual error / invalid
Use error (string) or invalid (boolean) to override. required shows the asterisk.
size / appearance
Optional size (sm | md | lg) and appearance (outline | filled) for consistent styling.