Question

您好我有一个组件（父级），它有一个子组件。在子组件中有一个表单。我想从父组件提交表单。我试图从父组件中调用子组件中的函数但是我没有成功。我在这里做了一个plunker演示http://plnkr.co/edit/TnkLK2FffAPP1YVo0uOg?p=preview 这就是我在父组件中调用函数的方法

  childcmp:App;
constructor(fb: FormBuilder){
this.childcmp=new App(fb);
}
submit(){
this.childcmp.onSubmit();
}

这是我在子组件中的代码

myForm: ControlGroup;

constructor(fb: FormBuilder) {  
this.myForm = fb.group({  
  'sku':  ['', Validators.required]  
});  
}

onSubmit(){  
console.log('you submitted value: ', this.myForm.value);  
}

我能够提交，但我没有得到正确的价值。有人请帮帮我

Answer 1

您需要利用@ViewChild装饰器通过注入引用父组件中的子组件：

import { Component, ViewChild } from 'angular2/core';  

(...)

@Component({
  selector: 'my-app',
  template: `
    <h1>My First Angular 2 App</h1>
    <child></child>
    <button (click)="submit()">Submit</button>
  `,
  directives:[App]
})
export class AppComponent { 
  @ViewChild(App) childcmp:App;

  (...)

  submit(){
    this.childcmp.onSubmit();
  }
}

这是更新的plunkr：http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview。

您可以注意到也可以使用@Query参数装饰器：

export class AppComponent { 
  constructor(@Query(App) children:QueryList<App>) {
    this.childcmp = children.first();
  }

  (...)
}

希望它可以帮到你，亨利

如何从父组件提交表单？

1 个答案: