Question

我有一个模型驱动形式的子组件（地址信息）和父组件（基本信息）......有人请点击“提交＆”时帮我获取如下所述的数据＃39;按钮..... plunker demo http://plnkr.co/edit/ZKPTrP2bGmKZkElShGj0?p=preview

submitted value: 
{
"firstname": "",
"lastname": "",
"addressinfo":{
   "Line1":"",
   "Line2":"",
 }
}

我不想在我的孩子形式中使用ngmodel ......有人帮我找到了解决这个问题的方法

Answer 1

您需要在addressinfo的父子项中创建一个空组：

this.myForm = fb.group({  
  'firstname':  ['', Validators.required],
  'lastname':  ['', Validators.required]  
  'addressinfo': fb.group()
});

然后，您需要将此组控件传递给子组件：

<child [control]="myForm.controls.addressinfo"></child>

在子组件中，您需要为此控件添加输入并创建与您的Line*字段对应的子控件：

@Component({ ... })
export class ChildComp {  
  @Input()
  control:Control;

  ngOnInit() {
    this.control.addControl('Line1', new Control('', Validators.required));
    this.control.addControl('Line2', new Control('', Validators.required));
  }
}

最后，您可以在子组件的输入上附加这些子控件：

<div class="field">  
  <label>Line1</label>  
  <input type="text" [ngFormControl]="control.controls['Line1']">
</div>

<div class="field">  
  <label>Line2</label>  
  <input type="text" [ngFormControl]="control.controls['Line2']">
</div>

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

如何获取父组件的表单值以及子组件？

1 个答案: