如何在 Angular 中处理自定义输入组件上的输入事件？

Question

我正在尝试使用 Reative Form 创建一个自定义输入组件，Angular 7但我无法将事件传递到输入字段。

我component有一个标签和一个输入字段以及一个特定的布局。我component html看起来像这样：

<div id="customInputGroup"  [formGroup]="parentFormGroup" [ngClass]="{'input-value': hasValue()}">
    <label [for]="inputId">{{label}}</label>
    <input [id]="inputId"  [name]="inputName"  class="form-control" [placeholder]="placeholder" [formControlName]="inputName" [mask]="mask">
</div>

而在我的Component：

@Component({
  selector: 'app-input-field',
  templateUrl: './input-field.component.html',
  styleUrls: ['./input-field.component.css']
})
export class InputFieldComponent implements OnInit {


  @Input('placeholder') placeholder = '' ;
  @Input('label') label = '';
  @Input('inputId') inputId = '';
  @Input('inputName') inputName = '';
  @Input('parentFormGroup') parentFormGroup:FormGroup;
  @Input('mask') mask;
  constructor() { }

  ngOnInit() {
  }

  hasValue(){
    return (this.parentFormGroup.get(this.inputName).value != undefined 
    && this.parentFormGroup.get(this.inputName).value != null 
    && this.parentFormGroup.get(this.inputName).value != '')
  }

一切正常，直到我不得不处理输入onBlur事件（或者它可以是任何其他输入事件）。我想要的结果是打电话给我component传递任何事件像这样：

<app-input-field (blur)="functionName()"></app-input-field>

或者

<app-input-field (keyup)="functionName()"></app-input-field>

我component将能够将这些事件“动态”传递到我的输入字段。有可能做到吗？

Answer 1

事件之类的blur工作input field，而不是选择器之类的<app-input-field>

您可以为所有事件发出事件，如模糊、键盘、鼠标悬停等。

输入字段组件：

HTML：

<input (blur)="functionName('blur')" (keyup)="functionName('keyUp')" [id]="inputId"  [name]="inputName"  class="form-control" [placeholder]="placeholder" [formControlName]="inputName" [mask]="mask">

TS：

@Output() OnInputEvent= new EventEmitter();

functionName(eventName) {
    this.OnInputEvent.emit(eventName);
}

在您的组件中：

<app-input-field (OnInputEvent)="functionName($event)"></app-input-field>

TS：

functionName(event) {
    switch (event) {
       case "blur":
       ...
       break;

       case "keyUp":
       ...
       break;
    }
}

工作演示