Angular template-driven form-validation using a directive

Question

I've been checking out the form validation fundamentals at the official docs and I can't wrap my head around with one of the examples.

Some background:

In this sample, the forbidden name is "bob", so the validator will reject any hero name containing "bob". Elsewhere it could reject "alice" or any name that the configuring regular expression matches.

And here is the input element:

<input id="name" name="name" class="form-control"
   required minlength="4" forbiddenName="bob"
   [(ngModel)]="hero.name" #name="ngModel" >

Yet, the input from their example seems to be not validated:

while the input using reactive forms from the same example gets validated as expected:

How do I make template-driven form display the alert as seen in reactive form?

Here is the example from the official docs: https://stackblitz.com/angular/byyynkdrode

Thanks in advance!

Eliseo · Accepted Answer · 2018-01-31 20:32:24Z

3

Must be

<input id="name" name="name" class="form-control"
               required minlength="4" appForbiddenName forbiddenName="bob"
               [(ngModel)]="hero.name" #name="ngModel" >

or

<input id="name" name="name" class="form-control"
               required minlength="4" appForbiddenName [forbiddenName]="'bob'"
               [(ngModel)]="hero.name" #name="ngModel" >

See that the directive name is "appForbiddenName" and the @Input variable is "forbiddenName". Of course you can change the directive, and make that name of the selector was the same that the @Input

@Directive({
  selector: '[forbiddenName]', //<--forbiddenName, NOT appforbiddenName
  providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
export class ForbiddenValidatorDirective implements Validator {
  @Input() forbiddenName: string; //<--see that the input variable is the same
                                  //that the selector of the directive
  ....
}

edited Jan 31, 2018 at 20:32

answered Jan 31, 2018 at 20:28

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Uğur Dinç Over a year ago

Figured it out 5mins ago and I was about to answer it on my own. Thanks

Collectives™ on Stack Overflow

Angular template-driven form-validation using a directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related