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

debugcn 发表于 Dev

用户7554035

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

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

我创建了一个子组件(selector: app-terms-conditions)。

这是子组件代码：

条款-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, ...);

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

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

穆罕默德·阿卜杜拉·沙菲克

我认为你应该有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>

更多信息在这里

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。