收听Angular 2中组件提交的表单答案

【问题标题】：Listen to the form submitting from component in Angular 2收听Angular 2中组件提交的表单
【发布时间】：2017-05-10 04:55:24
【问题描述】：

我有一个组件，它以Input 接收AbstractControl：

export class FormControlContainerComponent implements OnInit {
    @Input() control: AbstractControl;

    ngOnInit(): void {
        // this.control.root is a form
    }
}

我知道我可以使用control.root 访问该表单。如何收听从该组件提交的表单？有可能吗？

我正在使用angular 2.3。

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

我认为这是不可能的，我在源代码中找不到类似的东西，但我想出了这个想法。

您定义表单的位置：

<form [formGroup]="controlGroup (submit)="controlGroup.submit.emit(controlGroup.value)">

    <input [formControl]='firstNameControl' name="firstname">
 </form>

在你的课堂上；

export class MyComponent {

    private controlGroup = new FormGroup({});
    // this is your root controlGroup , how ever else you've created this is alright 

   constructor(){
     this.controlGroup.submit = new EventEmitter<any>();
     // we inject an event emitter inside the root controlGroup 


     this.controlGroup.submit.subscribe((data)=>{
        console.log('form is submitted with value ',data);
     });
   }
}

然后你可以这样做：

export class FormControlContainerComponent implements OnInit {
    @Input() control: AbstractControl;

    ngOnInit(): void {
        this.control.root.submit.subscribe((data)=>{
           console.log('form is submitted with value ',data);
        });
    }
}

显然，这看起来有点像 hack，但它没有任何危害，首选的方法是定义一个从 FormGroup 扩展的新类并提供此提交功能，但我懒得做那：D

【讨论】：