Creating dynamic validation attributes for input fields in Angular Reactive Forms through interpolation

Question

Creating dynamic validation attributes for input fields in Angular Reactive Forms through interpolation

It appears that a similar issue was discussed in this Stack Overflow thread, however, I am specifically seeking a solution using Angular instead of AngularJS.

Within my Reactive Forms, I have implemented validators as shown:

public contactForm: FormGroup = this.formBuilder.group({
  ...
  formControlDescription: [
    '',
    Validators.compose([
      Validators.maxLength(5000),
      Validators.minLength(30),
      Validators.required,
    ]),
  ],
  ...
});

In the html file, I currently have the number 5000 hardcoded like this:

<mat-hint align="end">{{ contactForm.get('formControlDescription')!.value.length }} / 5000</mat-hint>

Question: Is there a way to dynamically access and display the Validators.maxLength(5000) for formControlDescription from contactForm in the html?

angular typescript angular-reactive-forms angular-validation

Answer 1

Answer №1

If you want to retrieve the error object from min/max validators, you can do so like this:

<mat-hint align="end">{{ contactForm.get('formControlDescription')?.errors.maxlength?.actualLength }} / {{ contactForm.get('formControlDescription')?.errors.maxlength?.requiredLength }} </mat-hint>

Here is a cleaner version of the code:

<mat-hint align="end">    
  {{ contactForm.errors?.formControlDescription?.maxlength?.actualLength}} / 
  {{ contactForm.errors?.formControlDescription?.maxlength?.requiredLength}}
</mat-hint>

For more information, refer to the maxLength Validator documentation

Update

The values of angular validators will only be accessible when the validator detects an invalid input.

For example, with minLength(10), it will flag as invalid until there are 10 or more characters. Similarly, for maxLength(20), the values will only appear in the errors object when the user exceeds 20 characters.

This can be problematic if you need to consistently display actualLength and requiredLength to the user. Therefore, it's recommended to use a separate variable to handle this. Example:

const validatorOptions = {
  maxLength: 5000,
  minLength: 5
}

Then, in your template, use it like this:

<mat-hint align="end">{{ contactForm.controls.formControlDescription?.value.length }} / {{validatorOptions.maxLength}}</mat-hint>

Answer 2

If you want to retrieve the error object from min/max validators, you can do so like this:

<mat-hint align="end">{{ contactForm.get('formControlDescription')?.errors.maxlength?.actualLength }} / {{ contactForm.get('formControlDescription')?.errors.maxlength?.requiredLength }} </mat-hint>

Here is a cleaner version of the code:

<mat-hint align="end">    
  {{ contactForm.errors?.formControlDescription?.maxlength?.actualLength}} / 
  {{ contactForm.errors?.formControlDescription?.maxlength?.requiredLength}}
</mat-hint>

For more information, refer to the maxLength Validator documentation

Update

The values of angular validators will only be accessible when the validator detects an invalid input.

For example, with minLength(10), it will flag as invalid until there are 10 or more characters. Similarly, for maxLength(20), the values will only appear in the errors object when the user exceeds 20 characters.

This can be problematic if you need to consistently display actualLength and requiredLength to the user. Therefore, it's recommended to use a separate variable to handle this. Example:

const validatorOptions = {
  maxLength: 5000,
  minLength: 5
}

Then, in your template, use it like this:

<mat-hint align="end">{{ contactForm.controls.formControlDescription?.value.length }} / {{validatorOptions.maxLength}}</mat-hint>

Creating dynamic validation attributes for input fields in Angular Reactive Forms through interpolation

Answer №1

Similar questions

Ways to address observables in Angular in a manner similar to deferred objects

When making a GET request using Angular HttpClient, an error message stating "No overload matches this call" may

Performing addition in Angular 2 with the help of TypeScript

A step-by-step guide on making a web API request to propublica.org using an Angular service

Exploring the implementation of the jquery .counterUp function within Angular 5

Encountering an issue in an Angular project where it remains stuck at the preloader stage

Unwrapping nested objects in a JSON array with JavaScript: A step-by-step guide

What is the best way to identify the main dark color in Angular Material, and what other color variables are available for use with Angular Material?

Creating a dynamic form in Angular using reactive forms and form builder that pulls real-time data from the server

What is the best way to ensure that md-select takes up 100% of the

Failure to execute custom scripts in package.json

The 'innerText' property is not present in the 'Element' type. (2339)

Retrieval Error: the request was unsuccessful

Customizing a generic method in typescript

Angular can tailor its view templates to suit either mobile or desktop platforms

AG-Grid hierarchical data structure

The error message "better-sqlite3 TypeError: o.default is not a constructor" indicates that

Press the second form submit button after the completion of another Observable

The instance is referring to a property or method that is not defined, but being used during rendering. Verify that the property is reactive and included in the data option

Navigate back two levels (../../) using Angular2's relative navigation