Angular 17 - NGX MASK detailed over review & examples | data formatting and validation

Hello friends welcome to my channel here Ates in this video Let Me Explain how to implement ngx mask in angular 7 application first let me provide some overview after that we can start the real implementation so this ngx Mosk is the best directive to solve mking input with needed pattern it's having some def pattern if required we can create some custom patterns also for using this ngx MK the first thing is we have to install these packages after that we have to import this ngx mask directive and ngx mass fipe in our model and also need to add this provide ngx Mass function in our provider area using this ngx mask we are dealing three types of data one is numbers and characters and another one is dat time and next we can see how we are defining our patterns so in this pattern if you are using zero means it's denoting numbers 0 to 9 then the value is mandatory so in case if you are providing nine this one also denoting numbers 0 to 9 but it is the optional one and the next one is a so it includes characters and numbers we can use the upper case and also lower case that's not a problem and the fourth one is yes it will allow only the string value it can be upper case and also the lower case and the fifth one is U it will allow only letters that is in the upper case and the final one is y so it will allow the letters only in the lower case Okay so next we can see some of the important properties so the first property is prefix and suffix in this real time example I would say we can include some currency symbols or in this telephonic field we can can includ the country code and the second one is so M typed so it will just act as like a placeholder so the user exactly know what type of data they're supposed to type and the third one is drop special characters the default value is true only if required we can make this as the false and the fourth one is allow negative numbers it will allow the negative values so the fifth one is clear if not match this property used to clear our input in case the pattern is not matched and the six one is separator this is only for the numbers it's having the limit and also we can choose the symbol and the seventh one is hidden input so this is mainly used for the security purpose just imagine you have one four number so you want to show only the last four digits others if you want hide then we can use this hidden input and then percentage we all know uh it will allow the only percentage values with the symbol and the final one is custom pattern matching we can Define our pattern using Rejects and then we can use as the mask okay now let me start the implementation so the first step is we have to install the packages I'm having one created angular sound application and here I'm adding this package in GX mask okay the package has been installed you can see so the version is 17 okay so the next step is we have to import this ngx mask directive and ngx mask pipe so let me go to my app model ngx mask directive and ngx mask pipe okay this is fine next let me include this provider and let me run this application okay application in running mode we can use this MOS component see the response so let me add some controls okay so the first one we are doing for the number I'm just adding this mask and provided at zero so if I'm typing something it will allow only the numbers and also it is allowing only one digit so if you want enter multiple digit we have to include the star okay so next we can format this number I'm just providing like this okay four digit after that one hyphen symbol again four digit see if I typed something up to four digit it's fine if I'm entering the fifth digit see The Hyphen is added defaultly and also it will allow the eight digits only okay because we have defined like that so next we can do the phone number formatting so I'm just providing like this okay okay and in this one number if you want include the country code we can use the prefix option I would say prefix so once I'm started typing see this is added as the prefix okay let me refresh this one so initially it's not showing after started typing only it will show the country code so in so in case the initial time itself if you want to show this country code we have to use the so mask typed so let me include the property I'm setting value as true see now it will show very clearly the user can understand very clearly so once they started typing it will fill everything okay okay this is fine so next we can see the example for suffix it's almost similar to the freefix let me use salary okay so this surfix we can use use the dollar symbol so I would say I four digit and two dots see you I'm typing something so this value should be included defaultly okay okay this is fine so next we can use the separator so we can use the same salary okay so this mask let me provide a separator so let me save this one we can remove this suffix okay so if I'm typing something it's added the separator right so in case if I want to provide some symbol in this separator I can say th000 separator so let me provide comma okay so now see so instead of the space the comma is included okay so next we can see one new property that is drop special characters so let me include here drop so the default value is true only so let me provide false I will show you the difference the true and false for doing this one let me declare one property again I'm providing the same salary okay and including one span tag and in this input let me use the 2A binding the same salary is included okay now see so it is showing th000 once I'm entered some value the comma separator is included okay so in this model also I'm getting the same comma okay so in case if the value is true it will ignore the separator let me show you so once I'm changed the value the separator is included in the mask area only but in this model we will get the exact value as the true number all the special characters are removed so in case it is needed we can make this is the false okay and the next property is allow negative numbers so currently if you are entering this negative number it won't allow okay so let me include the property hello negative number so the value is true okay I'm getting some error okay it should be numbers so now if I'm trying to enter the negative it will allow okay so next we can see some of the string values we can copy this one so let me provide username okay so if you're including this separator then it should be a number only so I'm removing all the things so I want allow only the string values then I have to use this yes so now it will allow only four characters so it's allowed only four characters even if I'm trying to enter some number it won't allow okay the small letter also fine it will allow okay and instead of providing this four years we can manage one more way first use this s symbol and use the brackets like this so if I put four it will work like that only it not going to allow the fifth character so if it is needed we can say now I added seven okay so now we applied for the string the same thing we can apply for the numbers also so the next property is clear if not match so as for the pattern we have to enter the seven values I mean the seven characters if I'm provide so now it is fine so in case if I'm providing six characters only it will be removed automatically okay now I added the combination so now the first four places are characters it can be small letter or a capital letter so the next four letters should be uppercase the last four should be lowercase this is our pattern it's not allowing because it will allow only the small letters only but in the first four letter we can include the combination okay okay so this is the way the combination of pattern is working so the same way we can use like characters and numbers also I would say like this see it will allow n numbers but the first four digits should be a characters okay so the same way we can use the multiple combination so the next mask is percentage see know the percentage maximum value is 100 or less than 100 only okay so in case if you are entering higher more than 100 it won't allow so in this case we can include the suffix also then it is much efficient so this percentage symbol okay and our next mask is hidden so this is used for the security purpose first let me Define our MK okay I'm just using the phone number format only and then adding hidden input true so now I'm just adding like this okay and this fix also not needed so if I'm typing something it will show the last four digits other digits it's not showing but from the model we can get the complete value okay so if you want to test this one just added a phone so the default value should be empty and I'm added one span tag and we can use the same two-way bending so let me type here see so this is the value I typed in our control it's showing the last four digits only okay so next we can move on the date and time data we can remove this so the first one is for date okay see so the same way we can app play for the time also so the first one is hover then minutes second so let me try now so this is the way we can maintain the date and time okay this is working fine and the final one is custom mask that maybe I will cover in the separate video so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 2,863

Keywords: ngx mask in angular 17, ngx mask not working in angular, ngxmaskmodule deprecated in angular 17, create custom mask in angular, angular ngx mask for phone number validation, Show Mask Typed, Drop Special characters, Allow negative numbers, Clear If Not Match, hidden input angular mask, angular ngx mask properties, angular ngx mask with examples, overview of angular ngx mask, how to implement ngx mask in angular 17, why ngx mask, use of ngx mask, nihira techiees, angular 17

Id: Gf1UKzgp5eY

Length: 19min 45sec (1185 seconds)

Published: Tue Dec 19 2023