Question

我创建了一个组件，该组件包含一个表单控件及其周围的生态系统。表单错误显示逻辑，表单控件类型，它是数字，文本等。

这个想法是DRY，因为我的应用程序上有20多个表单，而且我发现我到处都在重复相同的DOM代码，因为所有表单控件显然基本上是相同的，并且包含DOM和错误显示逻辑是也一样。因此，我从表单输入中制作了一个单独的组件。

用于演示我的意思的HTML组件

<div [formGroup]="iFormGroup">
    <ng-container *ngFor="let validation of formInputValidations">
        <div *ngIf="GLOBALS.doINeedToShowFieldError( iFormControlName, validation.validatorStr, iFormGroup, formSubmitted, true )"
             class="error-box error-box--brand-popup scale-show">
            {{ _formInputErrorTextService.getFormFieldErrorText( validation.errorMsgId ) }}
        </div>
    </ng-container>

    <div class="input-wrap">
        <input type="text"
               class="input"
               [(ngModel)]="iNgModel"
               formControlName="{{ iFormControlName }}"
        />
        <label>{{ title }}</label>
    </div>  
</div>

我希望这段代码是可以自我解释的，这意味着有一个表单输入组件，该组件具有可配置的输入选项，从而导致标准化的表单输入及其周围的代码。

我在哪里卡住？

一切正常，但是我需要开始向输入动态添加指令。举例来说，这意味着某些输入需要具有货币掩码，因此我想添加一个输入选项，也就是。 isCurrency: boolean，如果这是一种货币，我想在输入中添加输入掩码指令。

<input type="text"
       class="input"

       --> currencyMask <--

       [(ngModel)]="iNgModel"
       formControlName="{{ iFormControlName }}"
        />

喜欢这个。

我知道angular不支持动态更改/添加指令，但是有什么方法可以在组件启动期间以某种方式添加它们吗？像* ngIf左右。

我尝试制作一个*ngSwitch="FormInputType.CURRENCY"，但后来我意识到，我可能无法简单地用单个ENUM对所有输入进行分类，因为可能会有指令组合，也就是货币和要求输入的指令和没有它的货币，等等。

有什么好办法吗？

Angular 5动态加载指令

0 个答案: