Question

我有一个表单和一个自定义组件。我想要实现的是，只要任何一个表单值发生更改，我的自定义组件都可以找出更改了哪个值和更改了哪个值，即i和item.name。我的第一个直觉是使用input的{{1}}事件。还有其他办法吗？

onchange

Answer 1

创建顶层表单，然后将组件包装在表单中

<form >
 <input [(ngModel)]="data" name="d" type="text">
 <app-my-component></app-my-component>
</form>

在子组件内部，使用Viewproviders获取父表单

import { Component, OnInit, Host } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class MyComponentComponent implements OnInit {
  constructor(@Host() private parentForm: NgForm) { }
  ngOnInit() {
    this.parentForm.form.valueChanges.subscribe(d => console.log(d))
  }

}

示例：https://stackblitz.com/edit/angular-atedm7

绑定到我的自定义组件的角形值更改

1 个答案: