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

这有错误

TextComponent.html:2 错误 DOM 异常：无法在“元素”上执行“setAttribute”：“{{field.validatorDirective}}”不是有效的属性名称。

我的指令有选择器 usernameValidator

Answer 1

看来你不能这么做。我确实尝试过，[attr.directiveSelector]="condition"但也不起作用。

一种解决方法（如果您对此感兴趣）是有两个输入，并且两个输入都有*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">