Page 19 - MSDN Magazine, March 2018

@Directive({
selector: '[forbiddenName]', providers: [{provide: NG_VALIDATORS,
useExisting: ForbiddenValidatorDirective, multi: true}]
})
Next, the directive needs to implement the Validator interface, which provides a single method, validate, which—as could be guessed—is invoked when validation needs to be done. However, the result from the validate function isn’t some kind of pass/fail result of the validation, but the function to use to perform the validation itself:
export class ForbiddenValidatorDirective implements Validator { @Input() forbiddenName: string;
validate(control: AbstractControl): {[key: string]: any} { if (this.forbiddenName) {
const nameRe = new RegExp(this.forbiddenName, 'i');
const forbidden = nameRe.test(control.value);
return forbidden ? {'forbiddenName': {value: control.value}} : null;
} else { return null;
} }
}
Fundamentally, Angular walks through a list of validators, and if all of them return null, then everything is kosher and all the input is considered valid. If any of them return anything other than that, it’s considered to be part of the set of validation errors, and added to the errors collection that the template referenced in the *ngIf statements earlier.
If the validator has a forbiddenName value, which is what’s passed in from the directive’s usage, then there’s validation to be done—the component’s input is used to construct a RegExp instance (using “i” for a case-insensitive match), and then the RegExp test method is used to check to see if the control’s value matches the name- which-shall-not-be-accepted. If it does, then a set is constructed with the key forbiddenName (which is what the template was using earlier to determine whether to show the error message, remember), and the value being the control’s input. Otherwise, the directive hands back null, and the rest of the form’s validators are fired. If all of them hand back null, everything’s legit.
Wrapping Up
Angular’s validation support is, as you can tell, pretty extensive and full-featured. It builds off of the standard HTML validation sup- port that’s found in every HTML5 browser, but provides a degree of runtime control support that’s extensible and powerful when needed. Most applications will find the built-in validators to be sufficient for most purposes, but having the ability to create custom validators means Angular can be as complex as necessary when working with user input. (Which is good, because users constantly find new ways to attempt to enter garbage into the system. I blame Josh for that.) There are still some more surprises hiding within the “@angular/forms” module before we’re done here, so stay tuned.
Happy coding! n
Ted Neward is a Seattle-based polytechnology consultant, speaker, and mentor, cur- rently working as the director of Developer Relations at Smartsheet.com. He has writ- ten a ton of articles, authored and co-authored a dozen books, and speaks all over the world. Reach him at ted@tedneward.com or read his blog at blogs.tedneward.com.
ThaNks to the following Microsoft technical expert: Garvice Eakins msdnmagazine.com
®
Instantly Search Terabytes of Data
across an Internet or Intranet site, desktop, network or mobile device
dtSearch enterprise and developer products have over 25 search options, with
dtSearch’s document filters support: • popular file types
• emails with multilevel attachments • a wide variety of databases
easy
multicolor
hit-
highlighting
• web data
• SDKs for Windows,
UWP, Linux, Mac, iOS in beta, Android in beta
• See dtSearch.com for articles on faceted search, advanced data classification, Azure and more
Visit dtSearch.com for
• hundreds of reviews and case studies • fully-functional evaluations
The Smart Choice for Text Retrieval® since 1991
dtSearch.com 1-800-IT-FINDS
Developers:
Ask about new cross-platform .NET Standard SDK including Xamarin and .NET Core
• APIs for .NET, Java and C++