以反应形式有条件地添加指令

Posted 2023-02-22

【中文标题】以反应形式有条件地添加指令

【英文标题】：Add Directives conditionally in reactive forms

【发布时间】：2019-07-02 09:20:50

【问题描述】：

我有一个响应式表单，其中 from 控件有一个数组并循环该数组以产生一个响应式表单 - 我的问题是我想为只接受数字的控件添加一个指令 - 如果我在循环中添加它如下所示，它在我的所有 input 类型中添加了该指令。

<ng-container *ngFor="let formInput of emergencyContactForm">
        <ng-container [ngSwitch]="formInput.controlType">
             <div *ngSwitchCase="'input'" class="col-4 mb-3" [formGroup]="emergencyContactDetails">
                <label [attr.for]="formInput.key">formInput.label</label>
                <input [formControlName]="formInput.key" [type]="formInput.type" appNumbericInput />
                <span [appDynamicFormsValidationMessages]="emergencyContactDetails.controls[formInput.key]" [formInputInstance]="formInput"></span>
             </div>
        </ng-container>
 </ng-container>

appNumbericInput 是用于限制用户在输入类型文本中仅输入数字的指令 - 但我不希望在我的所有 input 字段中添加此指令 - 我的问题是是否有将directives 绑定到表单控件的方法，例如将validation 添加到表单控件

NumbericInputDirective.ts

@Directive(
  selector: '[appNumbericInput]',
)
export class NumbericInputDirective 
  constructor()  
@HostListener("keypress", ['$event']) onkeypress(event) 
    return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57;


@HostListener('paste', ['$event'])
paste(event) 

    return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57;


@HostListener('keyup', ['$event']) onKeyUp(event) 
    let el = <htmlSelectElement>event.target;
    if (el.value != "") 
        let charList = el.value.substring(0, el.value.length);
        if (charList[0] === "0") 
            el.value = el.value.substring(1, el.value.length);
        
    

【问题讨论】：

我想这可能会对你有所帮助link

不，没有办法做你想做的事

【参考方案1】：

没有办法设置指令，添加条件属性不起作用，因为 Angular 不再将其识别为指令。

如果你不想使用 *ngIf 并且输入两次，一次有指令，一次没有指令，你可以告诉指令它是否处于活动状态：

<input [formControlName]="formInput.key" [type]="formInput.type" [appNumbericInput]="isNumericInput" />

在指令中，您使用 Input() 来获取值

@Input()
appNumbericInput: boolean;

然后在应用指令逻辑之前检查：

if (this.appNumbericInput) 
// place directive logic here

演示here

【讨论】：

否 - 我的类型将始终是 text 或 checkbox - 我没有使用 number 类型

好的，但是当输入是数字时必须有一个条件，什么时候不是。所以把那个条件放在那里。例如[attr.appNumbericInput]="myCondition() ? number : null"。之前的部分？可以将任何你可以放入 if () 的东西，它期望一个布尔结果，真或假。

如果条件失败 - 指令不会被添加 - 这是你的情况吗？

其实是的 - 我会尽力让你知道

是的，它没有在我指定的输入字段上添加指令，但指令不起作用