liveBook · Manning

Invalid property

As explained in Pro Angular 16

The invalid property of an Angular form or control indicates whether its current value fails one or more validators.

The invalid property reports whether a form control or entire form currently fails one or more validation rules. It is true when the value is invalid and false when it satisfies the applied validators. section 13.4.2 section 13.4.3

Use invalid to control validation feedback and submission behavior:

  • Display field-level messages with a condition such as name.dirty && name.invalid, avoiding immediate errors before the user edits a field. section 13.4.2
  • Check form.invalid after submission to determine whether any contained control has validation errors. section 13.4.3
  • Combine invalid with errors to identify which validator failed, such as required, minlength, or pattern. section 13.4.2

Show a validation summary after submission

A template can display a form-wide message with *ngIf="formSubmitted && form.invalid". The submit handler sets formSubmitted, checks form.valid, and resets the form only when validation succeeds. section 13.4.3

Table 13.6. The validation object properties
Name
Description
path
This property returns the name of the element.
valid
This property returns true if the element’s contents are valid and false otherwise.
invalid
This property returns true if the element’s contents are invalid and false otherwise.
pristine
This property returns true if the element’s contents have not been changed.
dirty
This property returns true if the element’s contents have been changed.
touched
This property returns true if the user has visited the element.
untouched
This property returns true if the user has not visited the element.
errors
This property returns a ValidationErrors object whose properties correspond to each attribute for which there is a validation error.
value
This property returns the value of the element, which is used when defining custom validation rules, as described in the “Creating Custom Form Validators” section.

Compare invalid with valid, pristine, dirty, touched, and errors on the validation object. section 13.4.2

How Pro Angular 16 covers it

How deep it goes
Explains control and form status, template conditions, and submission flow, but defers custom-validator implementation.
Examples
Demonstrates required, minlength, and pattern rules on a product-name input with field and form-wide messages.
What it assumes
Assumes Angular template-driven forms, named controls, validation attributes, and template references such as ngModel and ngForm.
What you can do after
Diagnose validation state, conditionally display errors, and accept or reset data only after the form becomes valid.
How it connects
Connects invalid with Angular forms, validators, ngModel, NgForm, validation errors, and form submission.
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.