A form field is a wrapper component that provides common UI and functionality for form controls, such as labels, hints, and error messages.
You can put any form control inside a form field, including inputs, selects, and textareas. Form field supports both template driven and reactive forms. It detects control validation errors and shows a localized error message.

Template driven forms

This example demonstrates how to use the form field component with template driven forms.

This is a hint

Reactive forms

This example demonstrates how to use the form field component with reactive forms.

This is a hint

Required field

This example shows a required form field. The asterisk (*) indicates that the field is required.

This is a hint
When the field is required, the form-field component automatically detects it and shows the required indicator next to the label. If you want to manually control the display of the required indicator, use the showRequired input property.

Conditional required

This example shows a form field that is conditionally required based on the value of another control.

When the required validation is changed dynamically, the form field can not detects it automatically. You need to bind the showRequired input to a variable that tracks the required state. [showRequired]="isRequired"
This is a hint

On this page: