Question

我有一个反应式，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);
        }
    }
}
}

Answer 1

无法有条件地设置指令，添加条件属性不起作用，因为角度不再将其识别为指令。

如果您不想使用* ngIf并将输入两次，一次使用带伪指令，一次不使用伪指令，则可以告诉该指令是否处于活动状态：

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

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

@Input()
appNumbericInput: boolean;

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

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

演示here

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

1 个答案: