问题标签 [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 投票
1 回答
153 浏览

forms - 如何在Angular中创建包含字符串数组的嵌套表单组件?

我正在尝试创建一个存储字符串数组的嵌套反应式表单组件。

我能够使用键值对而不是字符串数组创建嵌套表单组件。下面的 plunker 当前生成:

但生成这个会很好:

Plunker:https ://plnkr.co/edit/D8nYpNb4h1nzinzJX0Dh?p=info

非常感谢任何帮助

0 投票
0 回答
627 浏览

arrays - 如何在angular2中的反应形式上执行CRUD操作和正确使用接口?

我正在创建一个反应式表单数组来实现 CRUD 操作。经过长时间的谷歌搜索,我发现有几种方法可以实现这一点。我的疑问是:

  1. 如何使用货币接口从表单制作数据模型?
  2. 如何在单击按钮( addItem() )时将项目添加到 Items 数组?
  3. 提交后,是否可以将模型导出为 JSON?

    Github 源代码

货币.interface.ts

货币.component.ts

货币.component.html

0 投票
2 回答
7292 浏览

angular - 如何使用 Observable 初始化 Reactive Angular2 表单?

我的计划是将表单的值存储在我的 ngrx 商店中,以允许我的用户在站点中导航并在他们愿意的情况下返回表单。这个想法是表单的值将使用 observable 从存储中重新填充。

这是我目前的做法:

商店被赋予了一个初始值,我已经看到它正确地通过了我的选择器函数,但是当我的表单被创建时,我认为该值没有返回。所以this.recipe仍然是未定义的。

这是错误的方法,还是我可以以某种方式确保在创建表单之前返回 observable?

0 投票
1 回答
20 浏览

validation - 多个案例的可重复验证器

我做了一个日期验证器。它验证现有日期。我需要具有其他限制的多个日期验证器,例如:不允许用户输入未来日期的最大日期验证器或只接受过去日期的日期验证器。这是我当前的验证器。

如何限制用户输入未来的日期。我将此代码与以下行一起使用:

但我想知道是否有一种更简单的方法,而不必一遍又一遍地复制和过去这段代码来对其进行小限制。

0 投票
1 回答
1885 浏览

angular - Angular2 Reactive Form - 其他组件中的表单控件

我们有一个组件,上面有表单(我们将其称为预订表单),在 html 表单中,我们在另一个组件内部(我们将其称为查找)执行额外的逻辑 - 它在我们的组件中想再次重用相同的功能。

问题是我似乎无法让 formGroupName 或 formControlName 属性在查找组件中工作。

这是预订表格html

这是查找组件 html

控制台中出现的错误是

任何帮助将不胜感激!

0 投票
2 回答
26325 浏览

angular - 在Angular2的Reactives FormModule中禁用FormGroup控件

我正在使用Reactive FormsModule. Angular2现在,我想禁用FormGroup. 我可以readOnly在所有控件中使用属性,但这不是更好的解决方案,因为我们可能会在不久的将来添加新字段。

那么,总之有没有禁用FormGroup控件?

0 投票
2 回答
44802 浏览

forms - Angular2 - 如何将表单上的“touched”属性设置为true

我的组件中有一个反应式表单,我想将touched每个输入的属性设置为true. 我当前的代码会这样做,但会引发错误Cannot set property touched of #<AbstractControl> which has only a getter

如何将touched每个输入的值设置为true

0 投票
1 回答
680 浏览

javascript - 带有复选框的 Angular 2 反应式表单

最近我一直在试图弄清楚那些反应式表单是如何工作的。基本示例(无嵌套等)是可以理解的,但是如果我有这样的带有复选框的表单结构:

我应该如何在模板上呈现它以更改“*checked”值(true | false)?

0 投票
1 回答
1148 浏览

angular - 如何为自动保存响应式 Angular 2 表单创建验证。

我需要有关如何创建自动保存反应式 Angular 2 表单的建议。基本上用户输入值,如果值被验证,表单会自动保存。这是代码

3 个输入字段具有 Validators.required、Validators.minLength(10)。这是HTML:

每次通过点击我的 firebase 服务器更改输入时都会保存该表单。但我希望它仅在验证其中一个字段时保存。另外,如果字段值相同,我也不想调用 Firebase(保存操作)。基本上,我需要在绝对必要时最小化调用该操作的数据库,而无需用户单击愚蠢的提交按钮。我在离子 2 顺便说一句。因此,假设情况可以是:

  1. 输入字段首先被键入,但不符合验证 - saveForm 停止。
  2. 第一个输入字段已键入,并且符合验证但第二个字段仍然为空 - saveForm 保存(自动保存!!)
  3. 输入了第二个输入字段,但不符合验证并且第一个字段没有更改 - saveForm 停止。
  4. 输入字段 second 已键入,并符合验证,但字段 first 为空 - 仍然 saveForm 保存(自动保存!!)
  5. 用户第一个编辑字段但不符合验证,第二个字段没有更改 - saveForm 停止。

我想不出其他情况。关于如何使用反应/可观察反应形式构建它的任何建议?

0 投票
2 回答
933 浏览

javascript - 如何以反应形式传递单选按钮的值?

我有 Angular2 的 RC5 版本 我有类似的东西,其中一些

<input formControlName="uploadType" id="upload_type-parts_service" name="uploadType" value="parts_service" type="radio" />

我绑定了一个 onchange

然后我在我的js中定义了函数

我很难获得单选按钮的值。我的计划是将它传递给 onchange 函数并更新uploadType在视图中显示/隐藏某些元素的值。我试过通过thisthis.valuethis.type.controls.uploadType.value但没有任何效果。type是表单本身。

有人可以指出我将如何获得反应形式的价值吗?