问题标签 [angular2-formbuilder]

我有一个角度形式（反应形式）和一个后端服务。该服务告诉我用户界面中可以有多少个复选框以及标签及其值。

我想知道如何将标签值绑定到 UI。由于我正在获取所有数据，但不确定如何在使用 FormBuilder 时绑定标签。这是我的代码。

所以我的数据如下所示：-

我的表单生成器如下所示：-

我正在谈论的 FormGroup 在这里

现在问题是我希望模块名称是一个标签，但不知道如何将数据与带有标签的前端绑定。

请让我知道如何使用 FormBuilder 将数据绑定到标签。我的复选框如下所示：-

我有一个看起来像这样的反应形式。

在 addProblemJsonControls() 方法中，我试图访问 ProblemJson Form Group 的不同控件，但我收到一条错误消息

请帮助我正确访问 FormGroup。我是反应形式的新手。

this.profile我在 javascript 中的模型 ( ) 有一个名为 的属性emails，它是一个数组{email, isDefault, status}

然后我将其定义如下

在 html 文件中，我将其用作

如果我不添加它formGroup并将其用作数组 - 如下所示 - 它工作正常，但是我有一个业务规则，该数组不应该为空，我无法根据长度设置表单验证这个

我也尝试过使用formBuilder.array，但那个是用于拥有控件数组而不是数据数组。

那么我的问题是我应该如何将一个数组从模型绑定到 UI 以及我应该如何验证数组的长度？

我正在使用model driven forms并且正在寻找一种更好的方法来将数据绑定到相关的formControlName's，因为我的表单上有超过 25 个字段，我不想像我写的那样为所有字段编写代码对于下面。

模板：

组件：

有没有办法“自动”做到这一点？

使用“FormBuilder”在父组件中创建的表单对象，如下所示

表单对象的实例将传递给子组件，以便子组件中的输入字段可以绑定到父组件表单。（已为不同类型的输入字段创建了子组件，以便它们可以重复使用）

在子组件中，使用以下代码创建输入字段

由于此子组件处理密码和确认密码，因此需要触发相同的自定义验证器函数来检查密码和确认密码是否匹配。

现在如何触发相同的自定义验证器功能，该功能可以从两个字段中获取值并在密码和确认密码不匹配时给出错误？

谢谢您的帮助。

我有一个要使用多个验证器验证的字段。
使用模块驱动方法，代码如下所示：

但我也可以在没有Validators.compose()的情况下写这个，比如：

它工作得很好。我个人更喜欢第二版（没有compose），更少的代码和更好的可读性。这就引出了一个问题，我为什么要使用 Validators.compose()？

我正在使用 Angular 2 中的响应式表单模块来创建一个包含多个嵌套组的表单。

我的“信任”表格有一系列联系人

“联系人”组中的一个字段是“电子邮件”组的数组，我尝试在这里找到它，但唉，没有。那我去哪里找呢？

我使用以下内容设置我的表单。

然后，我使用以下内容添加“联系人”组。

然后我以同样的方式设置了 initContactEmail。

我正在尝试更新从服务收集的嵌套数据。*ngFor我通过使用填充输入值以 html 表单显示数据库数据。

当我尝试提交这个时，它总是给我null，因为我还没有真正接触过这些领域。奇怪的是，当我为该字段输入新值或编辑给定值时，它确实通过了它们。在正常情况下，这正是我想要的。

但在这种情况下，如果我只编辑第一个字段和submit表单，它只会传递第一个字段的值并null为其他字段提供。

换句话说，用表单数据覆盖现有数据对我来说是危险的，因为除了第一个数据之外，它会用 null 覆盖所有数据。

- - - - - 编辑 - - - - -

下面的代码现在可以使用 FormBuilder。它通过循环主数组长度的循环生成这些字段（下图）。

用清晰的语言：数组包含可变数量的对象。每个对象都有：

• 标题（第一个输入字段）
• 标头大小（第二个输入）
• 可变数量的段落

每个组都用一个<hr>标签封闭。

您还可以看到我填写了each输入字段的value标签，使用*ngFor（见下面的 html）。

现在的问题是，如果我submit在不更改任何值的情况下创建表单，我会得到一个包含所有正确键的对象数组，但它们的所有值都设置为，null因为我实际上没有编辑这些字段。

如果我提交，我想检索一组对象及其值，即使我没有编辑一个对象。

否则我将不得不编写一个复杂的功能来仅覆盖 value 所在的当前数据is not null。

所以我的实际问题是：

即使我没有编辑（触摸）单个字段，是否有办法检索所有值？还是我应该使用其他方法？

如果我submit得到这个表格（因为我实际上没有编辑过一些东西）：

HTML：

打字稿文件：

-------已解决--------

这并不简单（对我来说），但我必须做的事情真的很明显......我必须删除value binding我在 中所做的HTML，而是使用 for 循环用 formbuilder 填充值。

似乎尝试将表单生成器控件与 HTML 中生成的值结合起来并不是一个好主意，也不是很合乎逻辑。最好在 TypeScript 文件中而不是在 HTML 中处理我的复杂数据。

打字稿调整：

我有这个代码：

匹配密码：

}

html:

这是功能性的，并且运行良好，但我有一个特殊的用例场景应该修复。

1. 单击第一个密码字段。
2. 填写密码，例如：“foo”
3. 单击确认密码字段。
4. tpye 在同一件事上，例如："foo" 直到这一点，没有问题。
5. 在确认密码字段中输入不同的内容，例如：“foobar”（此时验证器显示此处有错误）
6. 单击密码字段
7. 在密码字段中输入相同的内容：“foobar”，在这里，确认密码字段仍然无效，直到密码字段失去焦点...... 有没有办法强制在 keyup 事件上运行匹配密码验证，而不是它现在如何工作？

我收到此错误：

尚未向此数组注册任何表单控件。如果您使用的是 ngModel，您可能需要检查下一个刻度（例如使用 setTimeout）。

使用此代码时：

内部ngOnInit：

当collaborators包含一个值，即它不是undefined，null或为空[]，类似于：

然后应用程序setValue在eventSubscription.

我无法弄清楚为什么会这样。

有任何想法吗？