问题标签 [reactive-forms]

我正在尝试在我的 Angular2 应用程序中使用反应式表单，但我遇到了如下异常

例外：未捕获（承诺中）：TypeError：无法读取 null 的属性“touched” TypeError：无法读取 null 的属性“touched”

我的示例代码如下

sign-up.reactiveForms.html 文件如下

我试图弄清楚为什么 touched 属性为空。

我无法让我的 child-formgroup 工作。找不到原因。我在控制台中看到的错误是：“formGroup 需要一个 FormGroup 实例。”

我的组件

我的 HTML

我有一个要求，我想实现逻辑以动态地将对象数组数据分配给输入控件，并且基于更新我想更新我的数组以及我想触发验证以检查控件中输入的名称/数据是否具有重复条目。为了验证，我使用了 ReactiveForm 模块。但我面临以下 2 个问题 –</p>

1. 如何创建相同的数组结构，以便在成功验证后可以直接将更新后的结构传递给 api？
2. 我如何将数组对象中的 id 分配给 formControlName，目前我正在为它分配循环索引。
   plunkar 参考这里 - https://plnkr.co/edit/RSBpT0sFSI1GDCp6K7VR?p=preview

零件：

类（摘要）：

任何帮助表示赞赏！

我正在使用 Angular2 开发一个应用程序。我正在尝试在我的应用程序中使用 Reactive Forms，但我遇到了一些错误：

第一个错误是关于 NgControl 的，如下所示：

NgControl 没有提供程序 ("

div class="col-md-8" [ERROR ->]input class="form-control" id="productNameId" "): ProductEditComponent@16:24

第二个错误是关于 ControlContainer 的，如下所示：

ControlContainer 没有提供程序 (" div [ERROR ->]div formArrayName="tags">

div 类="行">

按钮 cl"):

Htmm 文件如下：

我的组件文件如下：

我试图解决这个问题超过 2 天，但我仍然没有解决方案。我在stackoverflow中看到了许多其他答案，但没有一个能解决我的问题。

我正在创建一个嵌套表单组，如https://plnkr.co/edit/c93yFe2r83cvjiRvl6Uj?p=preview所示。

这是来自https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#reactive的一个例子

Angular 中的示例显示validationMessages了在表单没有任何嵌套组时使用。当我有嵌套的表单组时，我不确定如何扩展它。以下是我将创建的示例表单和验证消息。

预期formErrors和validationMessages

以下是onValueChanged

如何更新上述onValueChanged函数以支持嵌套表单组验证？

我这样做是因为我有一个向导表单，并且我想在进入向导的下一步之前验证嵌套的表单组。每个向导步骤都包含一个嵌套表单组。当前向导步骤必须有效，然后才能进行下一步。我不想将向导的内容放入多个组件中，因为向导中的所有数据必须在最后一起提交给远程服务。因此，我认为拥有多个组件并不会带来复杂的价值。

我正在尝试为用户创建一个表单，该表单将允许一个可能的电话号码与用户相关联。这可能与当前的反应形式实现吗？例如，我希望下面的表格可以接受很多电话号码。我的前端实现会显示电话号码字段，并且会有一个按钮，允许添加额外的电话号码字段。

我的黑客解决方案是

在单击添加其他电话号码按钮之前，我可以抑制其他电话字段。

我目前正在使用 angular 2 和响应式表单构建更新、添加、删除和编辑表单。我已将控件分组到表单构建器数组中，以将输入控件动态添加到表单数组。这适用于没有任何要初始化的项目的空表单。

问题是视图中的控件列表在index 0何时this.pageDetails包含值列表时包含一个空输入。这可以在constructorwith中删除

然而，这似乎不对。我想也许我可以在它的formBuilder.array

但是，当我使用该代码导航到页面时，出现以下错误：

./ItemsPage 类 ItemsPage 中的错误 - 原因是：无法读取未定义的属性“获取”

我正在尝试使用 Angular 的反应式表单，但我无法弄清楚如何延迟由服务填充的下拉列表的默认值绑定。这是我的组件代码的片段：

这里的想法是尝试获取“id”参数，为转移实体调用服务并将其绑定到带有帐户条目的预填充下拉列表的表单。我的部分观点如下所示：

对于大多数字段，传输实体正确绑定，但 'accountFromId' 选择元素留下了空值选择（选项存在，但未正确选择）。我应该如何重新连接我的组件以确保在从服务获取帐户值并将它们添加到选择后绑定 accountFromId？

在我的应用程序中，我使用的是模板驱动的验证，但现在我必须切换到模型驱动的方法，但我不想删除双向数据绑定。所以我的 html 控件就是这样

但它开始抛出这个错误

然后我将此 [ngModelOptions]="{standalone: true}" 添加到我的 html 控件中，但它给了我错误 [ngModelOptions] is not a known property of input。

当我用 ng-model-options 替换 [ngModelOptions] 时，更新 输入的未知属性的问题消失了，但我仍然收到错误“ngModel 不能用于使用父 formGroup 指令注册表单控件”。我在表单上有两个不需要验证的字段，所以它们没有 formControlName 属性。作为一种解决方法，我将这两个字段作为我的 fromgroup 的一部分，并在它们上添加了 formControlName 属性，现在它工作正常。虽然我不需要验证这两个字段，但至少我没有收到错误。

在组件中我这样做：

然后在模板绑定表单中：

但是，当我loginForm在运行login函数时记录值时，即使文本字段有值，它仍然是空的。

我已经导入了两者ReactiveFormsModule，NativeScriptFormsModule但不起作用。如果我更改password为任何随机名称，我也不会收到错误或任何东西。所以它就像它甚至没有以任何方式连接到表单。

我究竟做错了什么？我在 nativescript cli 2.5+ 上，这表明这段代码应该可以工作。

编辑：

我已经进行了一些挖掘，看来延迟加载模块是导致此问题以及其他问题的原因。我在这里提出了一个新问题：

https://github.com/NativeScript/nativescript-angular/issues/735

很高兴听到其他人是否遇到过同样的问题以及是否有解决方案。