From cd4c0eab946e2d634ce7aad12d9b5516ca0a6ffc Mon Sep 17 00:00:00 2001
From: Aric Thorn <aricthorn@hotmail.com>
Date: Wed, 15 Nov 2017 09:48:17 +1300
Subject: [PATCH] docs(forms): Custom Validator example selector name
 incorrect. (#20464)

Name of selector in ForbiddenName example is not consistent with Validator class nor Html selector example. Added the selector name 'appForbiddenName' as an alias name for the input of the Validator class, and updated the view accordingly.

Fixes: #20206

PR Close #20464
---
 .../form-validation/src/app/shared/forbidden-name.directive.ts  | 2 +-
 .../src/app/template/hero-form-template.component.html          | 2 +-
 aio/content/guide/form-validation.md                            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
index 1ffd6d638f..277a31bd33 100644
--- a/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
+++ b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
@@ -20,7 +20,7 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
   // #enddocregion directive-providers
 })
 export class ForbiddenValidatorDirective implements Validator {
-  @Input() forbiddenName: string;
+  @Input('appForbiddenName') forbiddenName: string;
 
   validate(control: AbstractControl): {[key: string]: any} {
     return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
diff --git a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
index c11336a3f2..c695abaa26 100644
--- a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
+++ b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
@@ -12,7 +12,7 @@
         <!-- #docregion name-with-error-msg -->
         <!-- #docregion name-input -->
         <input id="name" name="name" class="form-control"
-               required minlength="4" forbiddenName="bob"
+               required minlength="4" appForbiddenName="bob"
                [(ngModel)]="hero.name" #name="ngModel" >
         <!-- #enddocregion name-input -->
 
diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md
index f154e27178..6be1a0293a 100644
--- a/aio/content/guide/form-validation.md
+++ b/aio/content/guide/form-validation.md
@@ -171,7 +171,7 @@ comes together:
 <code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="directive" title="shared/forbidden-name.directive.ts (directive)">
 </code-example>
 
-Once the `ForbiddenValidatorDirective` is ready, you can simply add its selector, `forbiddenName`, to any input element to activate it. For example:
+Once the `ForbiddenValidatorDirective` is ready, you can simply add its selector, `appForbiddenName`, to any input element to activate it. For example:
 
 <code-example path="form-validation/src/app/template/hero-form-template.component.html" region="name-input" title="template/hero-form-template.component.html (forbidden-name-input)" linenums="false">