File validators in Angular

Whenever you allow users to upload files to your server, you should have both client side and server side validation. Most likely you will validate file size and file type, identifiable by the file extension. FileValidator covers all three aspects. Example of usage is below the source code. If you are using Angular, you can use these simple validators. If you do use them, or find them inspiring, please let me know. import { ValidatorFn, FormControl } from ‘@angular/forms’; export class FileValidator { static fileMaxSize(maxSize: number): ValidatorFn { const validatorFn = (file: File) => { if (file instanceof File && …

Continue Reading

Angular (click) not fired and how to fix it

Sometimes, very rarely, you can run into situation then Angular does not fire the (click) event. Or it fires later, on the 2nd click. It can be really hard to debug and figure out what causes it. So here are my two cents. This can be caused by view being updated while user clicks. What happens under the hood is this: Click event consists of mousedown event followed by mouseup event. That is important to remember! But when the view changes, then the mouseup event is fired elsewhere, so the click event never happens. It can even be, that the …

Continue Reading

Decimal number is not a number!

You have an input field, where user can enter decimal values. Problem is, that some cultures use decimal point “.” and some uses decimal comma “,”. So what is a valid number in one culture, is not a number at all in a different culture. You can see the full list of differences on wikipedia. There is no built-in validator for numbers in Angular, so we have built our own like this: import { AbstractControl, ValidatorFn } from ‘@angular/forms’; export class NumberValidators { static isNumber(): ValidatorFn { return (c: AbstractControl): { [key: string]: boolean } | null => { if (isNaN(c.value)) { return { …

Continue Reading

Invoke native element method with Angular 6

The useful method invokeElementMethod() has been removed from the new Renderer v3 in the upcoming version 6 of Angular. What does it mean? For example it is now harder to invoke focus() on input field or create custom native event, which bubbles up. The motivation of the Angular team is that this method has not been used internally, therefore they have removed it. I don’t think this was the best solution, because this method has been used by many. So now when you need to focus some input field, you need to write up your own renderer service. It makes the …

Continue Reading

Email validator for Angular

Angular has built in email validator, but it is very benevolent one. It allows for single letter domains, therefore email a@b is considered valid. Their motivation is that when used in intranet it can be perfectly valid email, because you can have custom domain names. But it does not make much sense in the broader internet. I would prefer if the built in validator would be stricter, or that there would be two validators, something like emailValidator and intranetEmailValidator. Here is my solution, hope it will help someone import {FormControl} from ‘@angular/forms’; // copied from http://emailregex.com/ export const emailRegexp = /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; …

Continue Reading

Workaround for ExpressionChangedAfterItHasBeenCheckedError in async pipe

Imagine that you have this piece of code, where userInfo$ is Observable and it value is not yet emitted. <app-change-email [currentEmail]=”(userInfo$ | async).user.email”></app-change-email> The code works, but it will report error ExpressionChangedAfterItHasBeenCheckedError to the console (only in dev mode). That is because the component has received the value, but the value has changed later. Angular does not like it. I googled for solutions, but could not use them, or it would be too complicated in given setup. Workaround is easy <ng-template #loading> <div id=”loading”></div> </ng-template> <ng-container *ngIf=”userInfo$ | async; let userInfoState; else loading”> <app-change-email [currentEmail]=”userInfoState.user.email”></app-change-email> </ng-container>

Continue Reading

Angular custom event bubbling

Custom events in Angular by default do not bubble up. It is because they are not really events, they are based on EventEmitter, which is similar to pub/sub mechanism. You can read lengthy discussion about it on Angular’s Github. Unfortunately the examples provided by Angular team often mention $event as named parameter in the event listener, which only adds to the confusion. There are valid use cases when you really need the custom events to bubble up. Luckily, you can still create DOM-native custom events, and they will bubble up as expected. import { Component, OnInit, Input, ElementRef, Renderer } from …

Continue Reading