Angular 7 - Добавить директиву динамически

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 содержит все необходимое содержимое, но я бы хотел динамически добавить имя директивы, которое будет использоваться.

В настоящее время оно добавляется как string как field.validatorDirective* 1007.*

Имеется ошибка

TextComponent.html: 2 ERROR DOM Exception: Не удалось выполнить 'setAttribute' для 'Element': '{{field.validatorDirective}}' недопустимоимя атрибута.

Моя директива имеет селектор usernameValidator

Answer 1

Кажется, ты не можешь этого сделать.Я пробовал с [attr.directiveSelector]="condition", но с этим тоже не работает.

A Обходной путь (если вы заинтересованы в одном) будет иметь два входа с *ngIf на обоих.Как то так:

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