小编Mat*_*ges的帖子

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

我正在尝试使用 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>
Run Code Online (Sandbox Code Playgroud)

而在我的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 …
Run Code Online (Sandbox Code Playgroud)

html angular2-custom-component angular angular-reactive-forms

3
推荐指数
1
解决办法
3812
查看次数