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

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 输入 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);
        }
    }
}
}