时间戳

首页 > 解决方案 > Angular 7 - 动态添加指令

angular - Angular 7 - 动态添加指令

问题描述

<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

标签： angularangular7

解决方案

看来你不能这样做。我确实尝试过，[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">

推荐阅读