liveBook · Manning

ngControl

As explained in Pro Angular 16

ngControl is an Angular directive that registers an HTML form control with Angular's form validation system.

ngControl registers an HTML form control with Angular’s validation system. Place the control inside a form and give it a name; Angular then tracks its validation state and updates the control and form classes automatically. section 13.4.2

Use ngControl with:

  • A containing form, because Angular validation reports an error when the directive is used outside one. section 13.4.2

Validated product name

<form (ngSubmit)="addProduct(newProduct)"><input name="name" [(ngModel)]="newProduct.name" #name="ngModel" required minlength="5" pattern="^[A-Za-z ]+$"></form>. Display messages when name.dirty && name.invalid, checking name.errors for required, pattern, or minlength.

How Pro Angular 16 covers it

How deep it goes
Explains form placement, validation attributes, state classes, error properties, and feedback templates without covering custom-validator internals.
Examples
Uses a product-name input with required, minlength, pattern, CSS feedback, and conditional validation messages.
What it assumes
Assumes basic HTML forms and Angular templates while demonstrating form binding, submission, and validation-state properties.
What you can do after
Apply it via Angular templates to validate controls, style their states, and display targeted error messages.
How it connects
Connects Angular forms with ngModel, two-way data binding, event binding, and form validation.
Cover of Pro Angular 16
liveBookmanning.com
Read Pro Angular 16 on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.