angular material - mat-error not displaying the error message for the input field

Question

Scenario - Reactive form with a form array. Each field in the form has a validation of Required. The form array itself has a validation of minlength(1) and maxlength(3). Adding 4 values in the form array should invalidate the form and display error message - Maximum 3 values can be added in the last values field.

Code is on - stackblitz

Issue - even when is condition in *ngIf of mat-error is true, it is not displaying the error for the field (even when the field is touched).

Steps to reproduce -

1. open stackblitz
2. enter 1 in the Value field and click + button
3. enter 2 in the new Value field and click + button
4. enter 3 in the new Value field and click + button
5. enter 4 in the new Value field. Expectation is to show the error Maximum 3 values can be added against the last value field.

Answer 1

You need to create a custom validator for your FormArray. See an example here.

https://stackblitz.com/edit/angular-qx5ttm