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异常：无法执行 'Element'上的'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">

Angular 7-动态添加指令

1 个答案: