ngmodel

ngModel is a directive in Angular that enables two-way data binding between a form control and a component property in template-driven forms. It connects the value of input, select, or textarea elements to a corresponding field in the component, so user input updates the model and changes to the model reflect in the view.

To use ngModel, the FormsModule must be imported in the application module. In templates, two-way binding is expressed with a binding syntax that combines a bound property and an event, typically written as a two-way binding between the element and a component property. When used inside a form, each ngModel instance may require a name attribute to participate in the form’s tracking and validation, and the control becomes part of the form’s overall state.

ngModel supports optional configuration through ngModelOptions, including updateOn to control when the value is updated (for example on change, blur, or submit) and debounce to delay updates. Validation can be applied using standard HTML attributes such as required or minlength, or via Angular validators when used in template-driven validation.

Within template-driven forms, ngModel creates a form control that exposes properties such as valid, invalid, touched, and dirty, which can be used to drive UI feedback and form logic. For more explicit form control management, Angular offers reactive forms with formControlName and FormGroup, which differ from template-driven ngModel.

ngModel is commonly used for simple forms and straightforward two-way bindings, but it is less suited for complex form logic compared with reactive forms. It remains a core feature of Angular’s forms module.