Angular 如何将ngForm传递给子组件？

我有一个自定义的输入组件，我想以多种形式重用它。但是如何将父级的表单上下文传递给它呢？通过传递

FormGroup

实例和字段名称，我已经成功地使用被动表单实现了这一点。我试图用模板驱动的表单实现同样的效果，但到目前为止还没有成功。这是我的代码：

提交

---

绑定没有正确进行，因为提交表单时未定义

f.value.myField

，只有

f.value.someField

。如何实现这一点？

您可以使用

ngModelGroup

指令，然后在您的子组件中提供它，如下所示，这是一个工作模式：

---

隐马尔可夫模型。。。当我这样做时，

f.value.myField

的计算结果为

{}

，而不是未定义。这是一个开始。编辑还抱怨

“没有ControlContainer的提供者”

（在

parent.component.html

中），但代码运行良好。给我几分钟时间，我会发布一个工作堆栈Blitzno匆忙，我的工作日已经结束了我在回答中添加了链接它工作正常。非常感谢。然而，这并不是我想要的。这个更适合我的需要：

// child.component.ts
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
})
class ChildComponent {
  @Input() name: string;
}

<form #form="ngForm" (ngSubmit)="console.log(JSON.stringify(f.value))">
  <input name="someField" ngModel />
  <app-child ngModelGroup="myField"></app-child> // here
  <button type="submit">Submit</button>
</form>

// child.component.ts
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  viewProviders: [{provide: ControlContainer, useExisting: NgModelGroup}] // here
})
class ChildComponent {
  @Input() name: string;
}