3

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

Mycomponent有一个标签和一个输入字段以及一个特定的布局。我的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将能够“动态地”将这些事件传递给我的输入字段。有可能做到吗？

4

2 回答 2

4

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

工作演示

于 2019-09-16T11:42:04.293 回答
3

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

export class InputFieldComponent implements OnInit {

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

  constructor() { }

  ngOnInit() {
  }

}

模板 

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

应用程序模板

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

我们为 blur 事件执行此操作，因为该事件不是气泡，keyup 将在没有创建任何自定义事件的情况下工作，因为它会冒泡。

演示

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

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

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

模板 

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

演示

任何气泡事件，如输入、按键、keyup、keydown，您都可以在元素本身上捕获，或者您可以像我们在 blur 事件中所做的那样解决它。

于 2019-09-16T14:30:30.993 回答