Ability to set a custom message while working with `Validators`

[kasir-barati]

Which @angular/* package(s) are relevant/related to the feature request?

forms

Description

It is really intimating and obvious that in most cases we need to show custom messages to the user but IDK why we cannot specify the error message in the component's class and we have to deal with it in a painful way in templates. Another thing is that this stackoverflow Q&A shows is that I am not alone 😄 .

Proposed solution

IMO it would be more readily to specify error message in the component's class and then use a common component to show error messages as it is described here

So in login.component.ts we have:

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class AComponent {
  public loginForm: FormGroup;
  public passwordSpecialChar = '!@#$&*';
  public passwordShouldContainsSpecialChar = /(?=.*[!@#$&*])/;
  public passwordShouldContainsOneLowercaseLetter = /(?=.*[a-z])/;
  public passwordShouldContainsOneCapitalLetter = /(?=.*[A-Z])/;
  public passwordShouldContainsOneDigit = /(?=.*[0-9])/;
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      username: [
        '',
        Validators.compose([
          Validators.required({ customeMessage: 'Please enter username' }),
          Validators.minLength(6, { customeMessage: 'Username should be at least 6 character' }),
          Validators.maxLength(320, { customeMessage: 'Username cannot be more that 320 character' }),
          Validators.pattern(/[\w_-\d]/, { customeMessage: 'Username can only contains alphanumeric, hyphens, and dashes' }),
        ]),
      ],
      password: [
        '',
        Validators.compose([
          Validators.minLength(8, { customeMessage: 'c message 1' }),
          Validators.required({ customeMessage: 'c message 2' }),
          Validators.pattern(this.passwordShouldContainsSpecialChar, { customeMessage: 'c message 3' }),
          Validators.pattern(
            this.passwordShouldContainsOneLowercaseLetter,
            { customeMessage: 'c message 4' }
          ),
          Validators.pattern(
            this.passwordShouldContainsOneCapitalLetter,
            { customeMessage: 'c message 5' }
          ),
          Validators.pattern(this.passwordShouldContainsOneDigit, { customeMessage: 'c message 6' }),
        ]),
      ],
    });
  }
}

and in the login.component.html we have:

<div>
  <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
    <div>
      <div>
        <label for="username">username</label>
        <span
          class="text-danger"
          *ngIf="loginForm.get('username').hasError('required')"
        >
          *
        </span>
      </div>
      <div>
        <!-- formControlName Syncs FormControl in an existing FormGroup instance to a form control element by name. -->
        <input
          placeholder="Enter your username"
          type="text"
          name="username"
          id="username"
          formControlName="username"
        />
      </div>
      <div
        *ngIf="
          loginForm.get('username').invalid &&
          loginForm.get('username').errors &&
          (loginForm.get('username').dirty ||
            loginForm.get('username').touched)
        "
      >
        <app-validation-errors
          [errors]="loginForm.get('username').errors"
        ></app-validation-errors>
      </div>
    </div>
    <div>
      <div>
        <label for="password">password</label>
        <span
          class="text-danger"
          *ngIf="loginForm.get('password').hasError('required')"
        >
          *
        </span>
      </div>
      <div>
        <input
          placeholder="Enter your Password"
          type="password"
          formControlName="password"
          name="password"
          id="password"
        />
      </div>
      <div
        *ngIf="
          loginForm.get('password').invalid &&
          (loginForm.get('password').touched ||
            loginForm.get('password').dirty)
        "
      >
        <app-validation-errors
          [errors]="loginForm.get('password').errors"
        ></app-validation-errors>
      </div>
    </div>
    <div>
      <div>
        <button
          [dissabled]="!loginForm.valid"
          type="submit"
          value="Login"
        ></button>
      </div>
      <div>Form Status: {{ loginForm.status }}</div>
    </div>
  </form>
</div>

and in the validation-errors.component.html I could state error messages vividly

<ng-container
  class="text-danger"
  *ngIf="errors && errors['required']"
>
  {{
    errors['required'].customMessage ? errors['required'].customMessage : 'This field is required'
  }}
</ng-container>

<!-- The same thing for the rest of it -->

Why am I motivated and think this is a unquestionable need?

I used to be a backend developer and I really appreciate class-validator. Now I came to learn Angular but I really feel that this is a dire need that has been forgotten or maybe it does not felt at all. BTW this is just an opinion.

Alternatives considered

Or at least we should have the power to change the default error message.
In the login.component.ts:

/* ... */
Validators.required({ message: 'Please enter username' }),
/* ... */

[jnizet]

There are libraries doing somewhat what you want (like one I wrote: https://ngx-valdemort.ninja-squad.com/#/, even if custom messages are still specified in the template).

But even what you want can be done quite easily: you simply need to wrap the standard validators into your owns, and store the custom message in the error you return:

function required(customMessage: string): ValidatorFn {
  return ctrl => {
    const error = Validators.required(ctrl);
    return error ? { required: { customMessage } } : null;
  };
}

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[kasir-barati]

@jnizet Please note what you say is extra work. Basically IMO these extra works make my code hard to maintain. BTW I liked your temporary solution. I consider this problem as a dire need not a feature, It is very normal that developers wants to specify the error message in the component's class.

BTW this is just an opinion. As I said I am motivated because I came from another area - Backend, NestJS, class-validator - and there this is a normal need.

[jnizet]

@kasir-barati IMHO it's not. The template is the right place IMHO to display the error messages:

• it's usually there that you do the internationalization
• it's usually there you use formatting pipes (for messages such as, for example "The amount must be less than $1,000")
• you might want to format the error messages using HTML markup: "The amount must be less than <strong>$1,000</strong>"

[kasir-barati]

@jnizet

• About internationalization IDK*.
• About Pipes I agreed
• About Formatting I am not sure, I am thinking about it.

* Can you share some repo/article/doc which is quite good at elaborating this specific topic who emphasis our topic - configurable error message - very vividly.

However I still think think we still needs the message part. I mean it can be added to the original objject. E.X. instead of { pattern: { requiredPattern: '/[a-z]/' } } we should have { pattern: { requiredPattern: '/[a-z]/', message: 'A default nullable changeable message' } }.

TBH you create a new movement in my perspective as it is shown itself in my last paragraph. But I still think we need this configurable error message.

[kasir-barati]

@jnizet Thanks to you at least until the Angular dev team add this feature I have something to play with it. You can see my implementation here. BTW I wanna ask you something more important and related to this question: #46427

Do you have any Idea? Why Angular where I thought - And so many people says - is full featured have these sorta gaps/black holes?

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.