问题标签 [angular-reactive-forms]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
86495 浏览

angular - 何时使用 FormGroup 与 FormArray?

表单组

FormGroup将每个子 FormControl 的聚合到一个对象中,每个控件名称作为键。

表单数组

FormArray将每个子 FormControl 的聚合到一个数组中。

什么时候应该使用一个而不是另一个?

0 投票
3 回答
23340 浏览

javascript - 在 ReactiveForm 中设置 Angular 2 FormArray 值?

这里已经有一个类似的问题(Setting initial value Angular 2 reactive formarray),但我对答案不满意,或者可能正在寻找其他解决方案。

我认为拥有 FormArray 的重点是传递对象数组,它应该创建相同数量的组件。但是在上面的示例中,如果您查看提供的 plunker ,即使在提供了两个 Addresses 对象之后,也创建了一个 Address ,因为它的空白版本已经在 ngOnInit() 中创建。

所以我的问题是,如果在 ngOnInit() 我有这样的地址:this._fb.array([]) // 空白列表,那么我应该如何设置它的值,它从 N 个地址动态创建 N 个地址在我的 TypeScript 数组中?

0 投票
15 回答
383218 浏览

angular - 如何禁用angular2中的输入

在 tsis_edit = true中禁用...

我只是想禁用基于trueor的输入false

我试过以下:

0 投票
4 回答
4304 浏览

angular - Angular 2:在某些条件下应用 Validator.required 验证

我有一个 angular 2 形式,其中我必须在某些条件下创建一个所需的字段,例如:

仅在某些类型的条件下才需要此描述字段,例如:

我怎样才能做到这一点,请提出建议。提前致谢!

0 投票
1 回答
1952 浏览

angular - 表单拆分为子组件时无法根据选择字段重置输入值

我正在显示和隐藏基于同一 FormGroup 中另一个 FormControl 的 FormControl,它使用下面的方法工作,但是当我尝试重置隐藏的输入以便提交时,它的值未发送,我收到以下错误。

组件方法

错误

在@yurzui的一些帮助下,我创建了一个显示错误的插件。只需在选择字段中更改otheranother并观察控制台注销错误。该错误似乎与将 FormGroup 拆分为子组件以减少每个类中的大小和逻辑有关。

如果您查看创建的第一个plunker,则当表单封装在应用程序组件中时不会发生错误。

0 投票
3 回答
7544 浏览

angular - 如何在动态 formArray 下的 formGroup 内的控件上监视 valueChanges

我是 Angular 2/4 的新手,也是 Web 开发的新手。我有这个表格,它在购买表格中收集产品变体的信息。我已经构建了一个 formArray 的 formGroups 变体,如下面的 HTML 所示。

现在,一旦用户添加了 3 个变体,我希望能够听到 formControl“productBarcode”的 valueChanges,以便我可以从数据库中获取颜色和尺寸的详细信息。

有什么建议可以实现吗?

提前致谢!

问候, 纳文

0 投票
1 回答
6817 浏览

angular - Angular 如何在 ngOnInit 上调用补丁值后格式化反应式 FormControls 值

我想在初始响应首次更新表单时格式化特定的输入字段,但我不知道如何进行初始格式化。

下面的例子是我尝试听的一种尝试ngModelChange。如果您在 FormControl 上设置值或输入不会取值,这将创建一个无限循环,但它使我想在父组件收到初始响应后更新格式。下面是我之后如何使用用户事件处理格式化,这很有效。

现在我能想到做这样的事情的唯一方法是遍历页面中的所有输入以强制聚焦,让它们格式化,然后再次将表单设置为不受影响,这是一个可怕的解决方案。

0 投票
8 回答
182599 浏览

angular - 如何从 FormGroup 中获取单个值

我知道我可以使用获取表单的值

但是,我想从表单中获取单个值。

我该怎么做呢?

0 投票
1 回答
90 浏览

forms - 使用 Angular 模板驱动的表单进行用户登录/注册

正如标题所说,我正在尝试使用模板驱动的 Angular 表单为用户提供注册和登录的方式。我已经阅读了很多关于在需要复杂验证时使用模板驱动表单的缺点。但是,这里不是这种情况。我的问题是:当一个人通常从一个干净的表单开始并真正提交一次数据时,在使用模板驱动的表单来实现此类功能时,是否还有其他缺点(不是立即明显或可能会在以后出现)?

0 投票
0 回答
2626 浏览

angular - 如何将项目添加到表单数组

我在 Angular 2/4 应用程序中使用反应式表单,当我尝试将子表单组添加到表单数组时,我在控制台中收到以下错误消息:

orderitems.component.html:84 错误上下文 DebugContext_ {view: Object, nodeIndex: 0, nodeDef: Object, elDef: Object, elView: Object}

它指向组件 HTML 中的这一行:

错误在第二行*ngFor

我正在构建这样的表格:

这是添加功能

任何想法为什么在向数组中添加新项目时会引发此错误?

有没有更好的方法将项目添加到嵌套表单数组?