如何将模糊功能传递和应用到父组件上的特定输入？答案

【问题标题】：How to pass and apply blur function to specific input on parent component?如何将模糊功能传递和应用到父组件上的特定输入？
【发布时间】：2026-02-11 00:40:01
【问题描述】：

我正在使用自定义输入字段作为单独的组件。我通过指令在父组件中添加了多个输入字段：<app-input ...></app-input>

我想将模糊事件/函数传递给父组件以进行特定输入（在本例中为密码字段），以获取其值并根据 Reg 表达式检查此值。

我已经搜索了很长时间（也在 SO 上）并尝试了几个选项，但它们都没有给出预期的干净行为。

我不断收到以下错误：

el => 未定义

我认为关键是如何将确切的元素 Ref 传递给form.component.html，以便该函数可以应用于确切的特定输入字段，在这种情况下为password。

我正在使用Angular: 5.2.10

input.component.html：

<mat-form-field>
    <mat-label>
        <mat-icon matPrefix>lock</mat-icon>
        <span>{{ inputLabel }}</span>
    </mat-label>
    <input matInput type="{{inputType}}" name="{{inputName}}" [(ngModel)]="model" (ngModelChange)="modelChange.next($event)" required="{{required}}" pattern="{{regEx}}" (blur)="onFieldBlurClient('name.value')">
    <mat-error align="end">
        {{ inputError }}
    </mat-error>
</mat-form-field>

input.component.ts：

export class InputComponent implements OnInit {

    public parentFormGroup: FormGroup;

    @Output() onFieldBlur: EventEmitter<any> = new EventEmitter<any>();
    @Input('label') inputLabel: string;
    @Input('name') inputName: string;
    @Input('validationError') inputError: string;
    @Input('type') inputType: string;
    @Input('pattern') regEx: string;
    @Input() required = true;

    @Input() model: any;
    @Output() modelChange = new EventEmitter();

    constructor() {
    }

    ngOnInit() {
    }

    onFieldBlurClient(el) {
        this.onFieldBlur.emit(true);
    }

}

form.component.html：

<app-input [label]="'Password'" 
           [type]="'password'" [name]="'password'" 
           [validationError]="'Pass is not valid'" 
           [required]="true" 
           [parentFormGroup]="form" 
           [pattern]="(password_rexExp)" (onFieldBlur)="onBlur()"> . 
</app-input>

form.component.ts：

export class FormComponent implements OnInit {
    ....
    public password_regExp
    public toogleRegExCheck = false;
    ...

    constructor() {
        this.password_regExp = '......';
    }

    ngOnInit() {
    }

    public onBlur(el) {
        console.log(`el => ${el}`);
        if (!password_regExp.test(el)) {
           this.toogleRegExCheck = true; 
        } else {
           this.toogleRegExCheck = false;
        }
    }
}

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

传递Event

 (onFieldBlur)="onBlur($event)"> .

【讨论】：

好一个。只是我忘了澄清我想获得值以再次验证它的正则表达式。因此，在这种情况下，当我应用$event 并将值记录为console.log(el => ${el.value}); 时，我得到undefined 你的建议，在日志中给了我true。跨度>
因为你在这里发出一个布尔值 this.onFieldBlur.emit(true); 发出一个带有 value 属性的对象，那么它就会起作用。
哦，你是对的。我的错。那究竟会是什么？：this.onFieldBlur.emit();
如果您不介意，我会问如何将输入的 elementRef 传递给form.component。如您所见，我动态传递名称、必需（真/假）、标签等。我想补充一件事：elemRef 例如：#inputPass。这样我就可以通过<app-input ...></app-input> 动态添加对特定输入的引用。例如：<app-input ...[eleRef]="#xxxxx"></app-input>。我的方法对吗？
按照您的提示，它现在的工作方式如下： this.onFieldBlur.emit( (event.target as HTMLInputElement).value );

【解决方案2】：

您需要在函数调用中传递模板中的 $event，以获取当前项目的值。

<app-input [label]="'Password'" 
       [type]="'password'" [name]="'password'" 
       [validationError]="'Pass is not valid'" 
       [required]="true" 
       [parentFormGroup]="form" 
       [pattern]="(password_rexExp)" (onFieldBlur)="onBlur($event)"> .

【讨论】：