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
This commit is contained in:
Aric Thorn 2017-11-15 09:48:17 +13:00 committed by Miško Hevery
parent 5b06069fd9
commit cd4c0eab94
3 changed files with 3 additions and 3 deletions

View File

@ -20,7 +20,7 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
// #enddocregion directive-providers // #enddocregion directive-providers
}) })
export class ForbiddenValidatorDirective implements Validator { export class ForbiddenValidatorDirective implements Validator {
@Input() forbiddenName: string; @Input('appForbiddenName') forbiddenName: string;
validate(control: AbstractControl): {[key: string]: any} { validate(control: AbstractControl): {[key: string]: any} {
return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control) return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)

View File

@ -12,7 +12,7 @@
<!-- #docregion name-with-error-msg --> <!-- #docregion name-with-error-msg -->
<!-- #docregion name-input --> <!-- #docregion name-input -->
<input id="name" name="name" class="form-control" <input id="name" name="name" class="form-control"
required minlength="4" forbiddenName="bob" required minlength="4" appForbiddenName="bob"
[(ngModel)]="hero.name" #name="ngModel" > [(ngModel)]="hero.name" #name="ngModel" >
<!-- #enddocregion name-input --> <!-- #enddocregion name-input -->

View File

@ -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 path="form-validation/src/app/shared/forbidden-name.directive.ts" region="directive" title="shared/forbidden-name.directive.ts (directive)">
</code-example> </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"> <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">