Form and validation are fundamental in website. Angular provide easy way to handle validation in form but we can still simplify more validation work with directive. In this post, I’ll show you how easily show validation error message without *ngIf and long expression. I assume you’ve already familar with Angular, I suggest you read these topic if you don’t know them. Stuctural directive Reactive form The problem in validation. Showing message to the user makes our code looks ugly. For example Before add validation message After add validation message Ewww. it’s so mess now. 😵 So I’m trying to get rid of duplicated code with directive magic. Here it’s what I achieve. It does looks a lot cleaner. 😻 This is achieved by 2 directives. and invalidmessage invalidType. InvalidmessageDirective directive receive form control by name and set visible of hosted element based on the form control’s error. invalidmessage Here’s the code of directive. invalidmessage Don’t worry, I will explain code soon. directive invalidmessage First, I inject for get instance from nearest parent’s injector (it’s in the above example ). ControlContainer Formgroup myForm Now we can easily get from control by name (eg, ). 😎 this.form.get('yourcontrolname') FormControl instance can get value, error and so on. Actually it’s just form control that you use in ReactiveForm. For example, this.myform.get('name'); I create method for set hosted element visble when the control is valid and hidden when it’s not. setVisible() Showing error message at first is really bad (Many Ux website told that) so it’d make user less grumpy if it just show when user interact with control or click submit button already. I check that with and in the above . this.control.dirty this.hasSubmitted method will be called when value of control is changed and when user click submit button. setVisible() Notice _Observable.of_ , it’ll emit immediately so _setVisible()_ will be called at initial. is Observable that emit when form is submitted. It’ll set to . formSubmit$ hasSubmitted true provide method for directive to call for checking if it match control’s error type. invalidmessage match invalidType is object whose propery name is error type. Say, form control has required and email validations and user break it. object will be like this. this.control.errors FormControl errors {required:true,email:true} You’ll see how it’s used in the next section. InvalidTypeDirective This directive is for set visible of host element based on error type of control which control difined in invalidmessage directive. As you may notice in the above example, . There’s asterisk prefix. It’s called For short, Stuctural directive will create surrounding host element which make host element won’t be rendered until you explicitly render with ***invalidmessage** Stuctural directive. ng-template ViewContainerRef Let code explian itself This directive is injected with 3 dependencies — , and . InvalidmessageDirective TemplateRef ViewContainerRef and are for create and remove host element(which it’s error message). TemplateRef ViewContainerRef Angular inject instance of that is nearest parent injector. InvalidmessageDirective <div invalidmessage="name"><p *invalidType="'required'">Please provide name</p> </div> which is on can get instance of **invalidmessageDirective (**which is on ) by injecing as we did above. InvalidTypeDirective <p> <div> InvalidmessageDirective in invalidTypeDirective So directive can use property and method of instance**.** invalidType invalidmessage directive method take a type of error by argument(which it’s defined with property) and check if error object has the specified error type. invalidmessage’s match type If return true, will create view from (it’s surrounding hosted element) and will clear when it’s false. In layman’s term, directive show and remove host element based on return value of method. invalidmessage’s match view container TemplateRef ng-template view container invalidType invalidmessage’s match It need to check if view container hasn’t created by checking _hasView_ property so it won’t create repeatly. is called when emit(control value change and user click submit button). setVisible() invalidmessage’s controlValue$ That’s all. These two directives can simplify our form validation. It’s maybe not perfect but it can give you an idea. If you have any question or suggestion, please comment below. Here’s plunker _Plunker is an online community for creating, collaborating on and sharing your web development ideas._plnkr.co Plunker ❤️ If you like this post, please leave a like and follow me on Medium or Twitter to read more about Angular, Javascript and more.

Create directive for showing error message in form with Angular

Too Long; Didn't Read

Company Mentioned

@Elec_crafter

RELATED STORIES