#Angular Material - Error State Matcher for Form Fields (2021)

hi there i'm happy to see you on my channel my name is mitromzynski and in this video tutorial we're going to talk about error state management for your angular material form controls i'm quite often getting the question how to change the default behavior of the error handling for angular material inputs dropdowns and so on so as example if we have some form by default if we focus on some input and then we um blur from it we already see the error message and our form turns into red but not always this is the correct behavior and the question is how we can change it without hacking the things around so if there any legal way to do it and there is such a way and in this video i'm going to show it so stay here we are getting started so let me just quickly show you the project i have prepared for you this is the very simple angular application which has only one component and one model and if we have a look inside i'm just importing required material modules and reactive forms because i'm going to use them and besides this inside app component i have just a simple reactive form which has only two fields name and last name both of them have um validators uh like it should be required field right and inside the template it's also pretty simple thing so we have the form we have the forced for first smart form field which has the mod error field which is uh going to be visible if control name has error required and here uh oh i have to change it last name if the last name has error as well besides this we have the mod input both of this mod form field have inputs and yeah and also we have the just a button which submit form and this is pretty much everything we have also some styles but i don't find that that it is so important to stay there and this is how our application looks like and this is just a simple form if i focus on some input and then go away we already see that the error pops up i mean error message pops up and we see that this field is required and as i mentioned in the intro we want to change this behavior and we want to implement our custom logic so how we going to achieve this and the key is in this mod input directive and if we have a look what this mod input provides to us we can find uh such a thing called error state matcher yeah you can see it here and this is the input where you can [Music] provide your own error state matcher so you can see it right here error statement and you can provide something here but how does it look this aerostate matcher and basically aerostate mature this is the instance of some class which implements the error statement interface so let's try to create such um such as state matcher so um i can create a separate file and we can call it uh like um custom state matcher and we're going to export here the class which i'm going to call also custom errors error state matcher here we go and as i mentioned before we have to implement the error state matcher interface so i'm going to implement error state matcher and you have to import this from angular material core and the only one method you have to implement is is error state and this method should return the boolean but besides this it also takes some arguments and this is what you will get so you have the control let's just import the whole these things there energy form so here we go uh we have the form control where we attach this certain error state matcher and also the form which belongs to this control or otherwise this control belongs to this form and you have to return some boolean and let's return um i don't know true by default so far without any logic we're just uh investigating right and besides this let's console log everything so like this right and now we have to create the instance of this state matcher and we have to provide it as a value here so i will go to our app component ts file and somewhere here i will create a property error state matcher and it's going to be the new instance of custom error state matcher yeah so i just import this from this file i have created and then i have to copy this arrow state matcher and or let's call it rename it custom custom error state matcher i can save it copy this and provide this instance right there and now let's have a look if everything works and indeed i reload the page and i see this field is immediately read because we return the true right we return true so without any check always it will be uh error state so let's have a look what's inside the console log and inside console.log we see the form control and form group directive and this form control this is the this form control where we attached this um arrow state matcher right so basically there will be form control with the field name so this form control will be passed as the first argument for this is error state method and the form will be our form group so instance of this thing will be passed as a second parameter and here you can see it in action so yeah this is our form group directive right there all right and let's bring some logic to this uh thing right because otherwise it's quite useless we can return the result of the next check so we can say if control is dirty so if we already entered some value to this input and if this control has errors and errors required right and we have to add also a question mark here because errors can be uh null right or undefined and if it's dirty and if it has errors required only then it will be considered like in error state so let's check if it works so this is default behavior i focus on the last name then i leave it and we see the error but if i focus on the name and then leave it it stays in its normal state right but if we try to change the value so we already entered some text and then we remove this only then we see the error state for this form control and see the message that it is a required field so we can see that our custom state matcher works and yeah this is how we provide it but this approach might be uh quite challenging because you have to define the uh error state matcher for literally every form control and so far we have only two form controls but if you have i know 15 20 that's kind of annoying and most probably you want to apply this globally in this case you have to provide this error state matcher via dependency injection so we can remove it here and you can provide it either on the component level so you can apply the state matcher for some certain component and its children so if you have the nested forms they will be using this um instance this aerostate mature as well as example if we provide on the app component level so we can use this providers array and inside we can say that provide error state matcher but instead of default one we we want to say that please use class and our custom error state matcher so in this case all inputs which belongs to this app component and its children as well will be using our custom error state matcher right if we save everything and try to check it you see both have the same behavior like this so only for dirty form it has been applied and if you want to have this the application wide so every material form control needs to have the same behavior in this case you have to remove it from your component and apply this on the model level and this is how dependency injection works in angular and if you are not um if you don't know how this um how this works i i would recommend you to have a look um one of my videos about dependency injection where i explained everything there and if you are completely new to angular i would also recommend you the course which i personally used and this course you can find in the video description to this video so yeah i provide uh this custom aerostate mature on the application model level so it means that all my uh material inputs will get uh the same logic uh for handling the errors and indeed if we uh check it one more time we see that yeah it works as before all right guys that's it for today i hope the information was useful the information was interesting don't forget to subscribe to my channel and if you find this video useful please share it with your colleagues with your friends and of course i highly appreciate your feedback in the comment sections and i wish you productive week ahead and see you in the future you

Channel: Decoded Frontend

Views: 3,950

Keywords: errorstatematcher angular material, mat-error angular material, angular material form field tutorial, angular material form input, angular material tutorial, angular material form field, angular custom form control validation, angular custom form control, angular custom form field, angular material login form, angular material form validation on submit example, mat form field angular material, angular material form, angular tutorial, Angular material

Id: yWw7CYFIDVw

Length: 14min 48sec (888 seconds)

Published: Tue Mar 16 2021

Reddit Comments

[u/MathematicianReal576]

Always helpfull videos. Keep up with the good work

[u/MouynaLeo]

Nice video! Do you have any resource for error message display?

I mean, in this video you only have one validator (required) so you always display `this field is required` on mat-error. But what if you add a minLength and want a different error message according to the error trigger? A getter that check the case and then return the right message ? In this case how do you manage i18n?

Thanks!