Question

Hie ...我有一个有形式的子组件。我正在尝试将child的表单值注入parent。我得到了控制组，但我无法获得这些值。我在这里做了一个plunker演示http://plnkr.co/edit/I5feR6NHdQuTT7rJrVYA?p=preview

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

这就是我如何获得子表单的价值我已经提到了父组件中的提供程序...有人请告诉我如何在输入内容时获取子组件的表单值？

Answer 1

看了你的傻瓜后，我看到了几种可能性：

您可以使用Address注释直接引用ViewChild之类的子组件。请参阅此回答Angular2 : No provider for String! (child -> String) in [Array in parent
```
@Component({
  (...)
})
export class AppComponent {
  @ViewChild(Address)
  address:Address; // your app property
  (...)
}
```
单击提交按钮可以使用address属性来访问addressForm组件的Address属性。

您是否要定义和管理AppComponent中的所有控件。如果是这样，则可以将它们作为Address组件的参数传递。这样您将通过引用工作，这样您的父组件将在单击提交按钮时知道该值。这样的事情：

@Component({
  (...)
})
export class Address{
  @Input()
  address1Ctrl:Control;
  @Input()
  cityCtrl:Control;

  constructor() {
    // No need to configure controls here
  }
}

@Component({
  (...)
  template: `
    (...)
    <address [address1Ctrl]="myForm.controls.address1"
             [cityCtrl]="myForm.controls.address1"></address>
    (...)
  `
})
export class AppComponent {
  constructor(fb: FormBuilder) {  
    this.myForm = fb.group({  
     'name':  ['', Validators.required],
     'address1':  new Control('',Validators.required),
     'city':new Control('',Validators.required)
     'Phone':  ['', Validators.required]
    });
}

最后一个选项是实现符合NgForm / NgControl的组件。这是一种更先进的方法。有关详细信息，请参阅此答案：Angular 2 custom form input

我用第一种方法重构了你的傻瓜。看到这个新的plunkr：http://plnkr.co/edit/sTEU4Fz7b7TXtRo1LXgK?p=preview。

为什么我不能将子组件值注入父组件？

1 个答案: