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

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)

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 -->