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

我认为您应该以{{1}}开头。首先在服务中定义一个表单组。

Reactive forms

，然后在子组件之间共享此服务：

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

更多信息here

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

1 个答案: