Customize Angular Formly validation messages
When you display error messages you want to make them as understandable as possible such that the user is able to figure out the problem. Example: the error message of a min validator should ideally contain the actual number and the min number allowed. So the message could be like "You have to enter a number bigger than X. You entered Y". Let's see how Formly allows us to display such highly customizable messages.
Instructor: [0:00] In this form here, we have already a required validator on our first name and we have to find it here in our template options of the corresponding field configuration. We define the message here in our AppModule where we have our FormlyModule.forRoot registration.
[0:14] Let's provide some more sophisticated message. For instance, here in our age property, we want to specify a min validator. We define 18 as the minimum allowed value.
[0:26] Whenever the user now has a value below 18, we want to provide him a more sophisticated message indicating what's the minimum allowed value so that he can correct his value and proceed in the form.
[0:37] Again, let's go to our AppModule. Just as we did here with forRoot required validator, let's define another one. This case, the min validator. We provide here a message and the string for the message.
[0:50] In this case, we don't define a string directly, but rather we define a function that allows us to further customize this message. At the very top here, we defined new function. Let's call it bin validation message. That gets an error, and it gets a field. That's the Formly field configuration.
[1:15] For now, let's return here a simple message, a whole message. Let's also console.log here the error and the field. We can see what the values are that Formly provides us.
[1:27] We also need to do now hook up that mean validation message below here. Rather than providing the string, we directly reference the function. Now let's go to the form. Let's open up the dev tools. If I type in 12, you can see here the console.log statements. The first parameter the error basically gives us the minimum allowed value which we defined, and the actual valid that has been provided.
[1:51] The second one provides us the whole configuration of our input field. We could directly also go here to the template options and read out here the mean value that we specified.
[2:03] Let's go back and customize this message now. What we could do here is we could provide a template string, "Please provide a value bigger than -- here we could say error.min, because that's actually the minimum value allowed -- you provided error.actual."
[2:29] We can remove here to console.log statements. Let's save again. Let 's try. Let's provide here 12. Now I can see here, "Please provide a value bigger than 18, and you provided 12." As you can see, we can really provide some context.
[2:47] What we can also do is we can define this message as a general [inaudible] message that holds globally for our app. In some specific case, we might even go here and override these messages.
[2:58] For instance, here, we could say validation -- this has a property, messages, and we could directly go and override here, for instance, the main validator, and say, "Sorry, you have to be older than 18." This message overrides what we just defined globally. You can see now, "Sorry, you have to be older than 18," which has overridden the message which you provided here.
[3:22] That is a very powerful mechanism which allows you to find messages globally, but also to customize them at the very specific needs that you might have in some dedicated forms on your app.