Angular 7 - Add directive dynamically

Question

<input  {{field.validatorDirective}} 
        class="form-control" 
        [ngClass]="{ 'border-danger': hasErrors }" 
        (keyup)="callback()" 
        [formControlName]="field.key" 
        [id]="field.key"
        [type]="field.type" 
        [placeholder]="field.placeholder" 
        [value]="field.value">

field has all the content required but I'd like to dynamically add the directive name to be used.

It is currently added as a string as field.validatorDirective

This has the error

TextComponent.html:2 ERROR DOM Exception: Failed to execute 'setAttribute' on 'Element': '{{field.validatorDirective}}' is not a valid attribute name.

My Directive has the selector usernameValidator

I have added what the directive name is `usernameValidator` this is being passed through as `field.validatorDirective` — , Nov 23 '18 at 12:53
This might help --> https://stackoverflow.com/questions/41298168/how-to-dynamically-add-a-directive/43752424 — Bunyamin Coskuner, Nov 23 '18 at 12:57

score 3 · Answer 1 · answered Nov 23 '18 at 12:56

It seems you can't do that. I did try with [attr.directiveSelector]="condition" but doesn't work with that as well.

A workaround(if you're interested in one) would be to have two inputs with an *ngIf on both. Something like this:

<input  directive1
    *ngIf="condition1"
        class="form-control" 
        [ngClass]="{ 'border-danger': hasErrors }" 
        (keyup)="callback()" 
        [formControlName]="field.key" 
        [id]="field.key"
        [type]="field.type" 
        [placeholder]="field.placeholder" 
        [value]="field.value">

<input directive2
    *ngIf="condition2"
    class="form-control" 
    [ngClass]="{ 'border-danger': hasErrors }" 
    (keyup)="callback()" 
    [formControlName]="field.key" 
    [id]="field.key"
    [type]="field.type" 
    [placeholder]="field.placeholder" 
    [value]="field.value">

Angular 7 - Add directive dynamically

1 Answers1