如何在父组件中使用子组件中的 ngModel？

Question

我的 Angular 应用由一个大表单组成。我能够从每个字段中捕获值并将其发布到服务器。

但现在，我正在尝试将应用程序重新分解为几个子组件。 当我尝试创建子组件时，ngModel 出现以下问题。

我创建了一个子组件（选择器：app-terms-conditions）。

下面是子组件代码：

terms-conditions.component.html

<card>
    <card-heading>
        <card-heading-body>
            <h4>Header content</h4>
        </card-heading-body>
    </card-heading>
    <card-body>
        Body content
    </card-body>
    <card-footer>
        <checkbox
          id="accept"
          heading="I accept"
          name="accept"
          value="accept"
          [(ngModel)]="chkAcceptTerms"
          required
          #theChkAcceptTerms="ngModel">
        </checkbox>
      </card-footer>
    </card>

这里是我在父组件中显示这个子组件的地方：

<accordion-body>
    <app-terms-conditions></app-terms-conditions>
</accordion-body>

我目前在 terms-conditions.component.html 中收到以下错误：

未定义标识符“chkAcceptTerms”。组件声明、模板变量声明和元素引用不包含这样的成员

这只是我拥有的几个子组件之一。

我想从各种子组件中捕获选定的值并将它们一起发布到服务器。

以下是在重构之前使用此复选框的父组件中的一些代码示例：

this.postData(this.chkAcceptTerms, ...);

但我不知道是否应该将子组件的值传递给父组件，或者如何做到这一点，或者有更好的方法吗？

有人可以给我建议，或者举个具体的例子吗？非常感谢任何帮助！

Answer 1

我认为你应该使用 Angular 的 Reactive forms。 首先在服务中定义一个表单组。

this.formName = this.formBuilder.group({
  chkAcceptTerms: ['']
})

然后跨子组件共享此服务：

<card-footer [form]="formName">
    <checkbox
      id="accept"
      heading="I accept"
      name="accept"
      value="accept"
      formControlName="chkAcceptTerms"
      required>
    </checkbox>
  </card-footer>

更多信息here