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 ERROR DOM Exception: Failed to execute 'setAttribute' on 'Element': '{{field.validatorDirective}}' is not a valid attribute name.

我的指令有选择器 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">