Question

我正在尝试使用Angular 7中的Reative Form创建自定义输入组件，但是在将事件传递到输入字段时遇到麻烦。

我的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并传递诸如 this ：

之类的任何事件

<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>这样的选择器

您可以针对所有事件（例如模糊，抠像，鼠标悬停等）发出事件。

InputFieldComponent ：

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;
    }
}

Working Demo

Answer 2

对于模糊事件，您需要创建一个具有相同名称的事件发射器，并在输入模糊模糊发射时发射该事件

export class InputFieldComponent implements OnInit {

  @Output() blur:EventEmitter<any> = new EventEmitter(); // ?

  constructor() { }

  ngOnInit() {
  }

}

模板

<input type="text" (blur)="blur.emit($event)"  >

app.template

<app-input-field (blur)="onBlur($event)" (keyup)="onKeyup($event)"></app-input-field>

我们对模糊事件进行了此操作，因为该事件不是冒泡的，因此在不创建任何自定义事件的情况下，键盘输入将起作用，因为它会冒泡。

demo ??

您可以像这样实现两种方式的数据绑定

  @Input() value:EventEmitter<any> = new EventEmitter();

  @Output() valueChange:EventEmitter<any> = new EventEmitter();

模板

<app-input-field  [(value)]="name" ></app-input-field>

demo ??

任何气泡事件（例如输入，按键，键，键按下）都可以捕获到元素本身，也可以像处理模糊事件一样处理它。

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

2 个答案: