问题标签 [reactive-forms]

伙计们，我需要一些关于 Angular 4 反应形式的帮助。除了验证之外，我嵌套的表单组也可以正常工作。但是当我尝试在我的 html 标记中添加一些处理验证时，我的应用程序崩溃了。

我的组件代码如下所示：

这是我的一段模板代码：

我有一个如下按钮。

它位于带有formGroupName="company". 如果公司无效，我想禁用按钮的单击事件。另外，我想为中的所有字段设置脏，formGroupName="company"以便触发验证器并显示错误消息。

我可以在(click)按钮的情况下执行此操作，但我正在尝试找到一种最佳方法来执行此操作，例如将函数this formGroupName作为输入并执行操作，而不是我显式传递formGroupName. 我在页面中有多个 formGroupName。

我不想使用disabled按钮的属性，因为我想在单击按钮时触发验证。

根据上面的需要，最好的方法是什么？

我有一个捕获电话号码的表格。我需要更新输入的值以匹配 (999) 999-9999 格式。这是我的代码：

'asYouType('US').input(data)' 来自libphonenumber-js。这是用于将电话号码值格式化为“美国”格式的内容。

我必须添加“debounceTime(1000)”，因为在使用 patchValue 设置新格式化的值时会发生 JavaScript 错误，导致 valueChanges 再次触发。'debounceTime(1000)' 可以防止这种循环效应。

有没有更好的方法来格式化电话号码值？鉴于我必须使用'debounceTime(1000)'，这似乎是一种黑客方法。

我正在尝试将值绑定到子组件。该值来自对象的属性。但是对于我的工作，属性名称是一个变量，我正在寻找一种解决方案来绑定类似的东西

甚至这个

-------------------------------------------------- -----------------------------------------

以下是我正在尝试做的简要说明。

我的目标是有一个框架，当我传递一个对象（带有数据）和表单项的集合（映射到对象）将显示表单（查看/编辑）

我正在使用动态表单中的指南，并且能够根据构成表单的项目集合显示空表单。我坚持显示填写的表格（详细信息）。

例如表单项的集合

要查看/编辑的数据

sampleData 中的propertyName 是TextBoxItem 中“key”的值。

现在，当我从 sampleData 绑定第一个项目时，我希望每个属性都绑定到表单定义的相应项目应该在 html 控件中显示数据。

所以我正在寻找一种解决方案，比如将 SampleData 中的选定项目绑定到表单

详细组件的模板：

而 Form 又应该将每个属性绑定到 formItem。这是我被卡住的部分。我的想法是从 formObject 中获取属性值，例如formObject['{{item.key}}']需要您的帮助。

表单组件模板的一部分：

以及Item Component模板的一部分：

我已经修剪了代码，只是为了让您了解我的问题的主要思想。如果您需要更多信息，请告诉我。

谢谢

我正在使用反应式表单，并且在理解数据如何映射到表单的控件时遇到了一些麻烦。让我们举一个具有 id 和名称的对象控件的示例。此控件应呈现为输入文本框，并且用户键入 Id。然后，我使用自动完成功能远程查找对象并使用如下所示的数据填充底层对象

因为，这是一个对象而不是字符串 - 输入框显示 [object Object] 作为其值。我假设我需要toString为此对象提供一种方法才能显示这样的值1234 - Some description。

这是表单配置：

这些对象之一也是如此customer，并且该对象上还有另一个类似的item对象。

获得订单数据后，我会以如下形式加载它：

问题是数据作为普通对象加载，并且没有类型转换为适当的类，因此，toString任何嵌套对象都没有方法可以显示输入框[object Object]而不是使用 toString 方法。

示例订单的 json 如下所示：

主要问题是，如何确保以 json 形式传入的数据被捕获在适当的类中，以便 toString 等方法可用于正确显示。

我的目标是将所有验证消息放在组件而不是 html 文件中

我有一个注册页面，下面是字段：

我正在按照这个教程链接来实现我想要的，即将我所有的验证消息放在组件文件而不是 html 文件中。

onValueChanged 方法

当我有多个 formBuider Group 或嵌套对象时，此方法不起作用。这个1有什么建议吗？
类似于如何使用嵌套表单组验证反应式表单？

如何在兄弟组件之间传递数据？假设我有一种如下所示的数据输入网格：

比方说，有一些打字稿会被触发valueChanges或触发focusout处理在每个字段中输入的数据的事件。我的问题是，如果我需要访问该领域id的焦点数据name。我怎样才能做到这一点？

所以我只能访问name某行的控件，我需要id同一行的控件。

我可以想到几种不同的方法来做到这一点：

1. 在name控件的html中，在focus out事件中传递id控件。就像是<input type="text" formControlName="name" onNameFocusout="(frm.controls.items.controls[i].controls.id, frm.controls.items.controls[i].controls.name)" />

2. 使用数据共享服务。在网格中输入的任何值也可用于数据共享服务，以供任何组件检索。这仍然需要知道要从中检索数据的行的索引。

有关如何以更好的方式完成此操作的任何建议，或者这些方法中的任何一种都应该可以正常工作。

谢谢

已修复：根据 GH 问题：github.com/angular/angular/issues/12366，此问题是现已在 6.0.0 和 5.2.5 以上版本中修复的错误

使用 Angular (4.x) 我使用 ReactiveForms 并且我已经订阅了我的 FormControl ("input") 上的 valueChanges，如下所示：

所以现在我可以对 FormControl 值的变化做出反应，但我当然会从某个地方开始填充表单的值，所以我习惯form.patchValue(data)这样做。

由于这不是用户更改，因此我不想对此做出反应，因此添加标志emitEvent: false，例如：this.form.patchValue(data, {emitEvent: false})。

哪个按预期工作。

现在我有一些逻辑，当表单加载时，我将整个表单设置为禁用，this.form.disable({ emitEvent: false })并且在完成加载后将整个表单再次设置为启用：this.form.disable({ emitEvent: false })

但我也有逻辑，根据不同的标志将 FormControl 设置为启用/禁用：this.formControl.enable( {emitEvent: false});

我现在看到的问题是，当Form, 更改状态时，它会触发FormControl.valueChanges，即使我提供了emitEvent: false标志。

这是预期的行为，还是错误？我希望在提供标志时根本不会触发任何事件？

我做了一个可以在这里测试的地方： https ://plnkr.co/edit/RgyDItYtEfzlLVB6P5f3?p=preview

使用 Angular4 ReactiveForm（我正在使用的版本）创建一个表单。我在哪里有一个表格，里面有代码、年份和类别列表。

主要形式：

• 代码
• 年
• 类别[]
  • 代码
  • 描述
  • 命令
  • 产品[]
    • 代码
    • 描述
    • 价格

但我试图以下列方式显示表单，其中类别列表和每个类别中的产品都是行，并且都将显示在同一个表中（示例）：

我能够将类别显示为行，但我无法将每个类别中的产品显示为类别行下方的一行：

我的打字稿形式：

搜索，有人告诉我使用ngfor模板，但我不能使用它们，当我尝试使用它们时，模板标签内的内容不显示。

如果我使用 div，我可以在每个类别下方显示产品。但它在桌子内不能很好地工作。

我的模板：