未获取反应形式的输入值（Angular5）

我在申请表中使用了被动形式。 我使用插值为输入字段赋值

提交表单后，不会获取使用插值指定给输入字段的值。有人能告诉我我做错了什么吗

main.component.html

名称
下一个

main.component.ts

export类MainComponent实现OnInit{
表格：表格组；
构造函数（）{
this.form=new FormGroup({
项目：新FormControl（“”，验证器。必填）
})
}
onSubmit（值）{
console.log（值）；
}
}

试试：

---

对于反应式表单，您不需要设置

值=“{{item}}”

但是

项

变量定义在哪里

您可以这样做：

名称
下一个

在我看来，对反应式表单的工作原理有点困惑

对于反应形式，真理的来源已经在组件、模型中，而不是模板中。因此，每当控件发生变化时，它都会以同步方式反映在模型中

您的模板所需的内容不应超过此内容

名称
下一个

然后在组件中

export类MainComponent实现OnInit{
表格：表格组；
构造函数（）{
this.form=new FormGroup({
项目：新FormControl（“”，验证器。必填）
})
}
onSubmit（）{
console.log（this.form.value）；
} 
}

我消除了提交函数中不必要的插值和不必要的

表单传递。我还用小写字母将控件名重命名为
item
，因为大写字母应该只在
对象中使用，这些对象可以像
类一样进行更新

查看一下，以便更好地了解它们的工作原理
您到底想实现什么目标？似乎对反应式表单的工作方式有点困惑。为什么要在onSubmit上传递form.value？真相的来源已经在组件中，而不是在模板上。为什么需要插值来控制被动表单呢？我使用插值是因为我将一些值从组件分配给html输入元素。稍后单击submit时，我希望将完整的数据从表单传递回组件。但是当我尝试这样做的时候，所有的数据都被提取出来了，除了这些输入元素的值，我用插值赋值。所以这就是你的困惑所在。数据已在表单中。每当您更改输入中的数据时，组件中的数据也将以同步方式更改。你不需要上下传递任何东西。如果您检查我的解决方案，您将看到它将记录您在输入中设置的任何值。这就是为什么它们被称为反应形式。无论何时更改组件或模板中的数据，组件中的表单变量都将始终保持同步。这就是它的美妙之处：）如果此解决方案解决了您的问题，请不要忘记检查答案是否已被接受，以便它可以帮助其他人解决类似问题。我知道表单包含所有数据。但是在我的例子中，当我试图打印表单值时，所有的数据都是从表单中获取的，但是只有使用插值指定的数据不是由表单获取的。为什么会发生这种情况？我仍然不理解插值的用例。为什么需要插值？