Skip to content

docs(material/input): add example for showing errors from a parent form group - #33822

Open
RAJEEV2510 wants to merge 1 commit into
angular:mainfrom
RAJEEV2510:docs/8513-input-parent-form-errors
Open

RAJEEV2510 wants to merge 1 commit into
angular:mainfrom
RAJEEV2510:docs/8513-input-parent-form-errors

Conversation

@RAJEEV2510

Copy link
Copy Markdown

Fixes #8513

Errors from a validator on a parent FormGroup, such as a check that two fields match, are set on the group rather than on the input. The input's own control stays valid, so <mat-error> never shows them by default. This comes up often (see the issue thread), and the docs don't cover it.

  • Adds an input-parent-form-errors example: a password and confirm-password form with a group-level passwordsMismatch validator, and an ErrorStateMatcher that shows that group error on the confirm field once it has been interacted with or the form is submitted.
  • Adds a short paragraph and the example to input.md under "Changing when error messages are shown", right after the existing input-error-state-matcher example.
  • Registers the example in src/components-examples/material/input/index.ts.

Docs-only; no library code changes.

Verification

  • bazel build //src/components-examples/material/input:input //src/components-examples:docs-content succeeds, and the example appears in the generated docs content.
  • ng-dev format, tslint and stylelint pass on the changed files.
  • The matcher and form from the example behave as intended: no error while pristine, the mismatch is shown after the confirm field is dirty or the form is submitted, it clears once the passwords match, and the required error still shows.

…rm group

Errors from a validator on a parent form group, such as a check that two
fields match, are set on the group instead of the input, so `mat-error`
doesn't show them by default. Add an example that uses an
`ErrorStateMatcher` to show a parent group's error on the related input.

Fixes angular#8513
@pullapprove
pullapprove Bot requested review from ok7sai and tjshiu September 16, 2026 20:40
@angular-robot angular-robot Bot added area: docs Related to the documentation area: material/input labels Sep 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: docs Related to the documentation area: material/input

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[input] Add example of using mat-error with parent formgroup validation

1 participant