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

forms - 添加到 Reactive Forms Array Angular 的开头

请查看相关plunker

https://plnkr.co/edit/f0BxpinhuqVz8o6IIFaL?p=preview

如果您运行它然后单击添加按钮,则会将新条目添加到数组中,但表单视图不会反映表单状态,而是第一个条目被复制并且最后一个条目消失了。

如果有人对我做错了什么有任何想法或指导,我将非常感激,因为我一直被困在一个看似简单的任务上。

我尝试尽可能接近官方的 Angular Reactive Forms 指南来构建这个示例。

0 投票
10 回答
75654 浏览

javascript - 反应表单上的自定义验证器用于密码并确认密码匹配将未定义的参数导入 Angular 4

我正在尝试实现一个自定义验证器来检查密码和密码确认是否相等。问题是验证器正在获取未定义的密码和确认密码参数。我如何使这项工作。该函数有效,因为如果我将条件更改为 === 而不是 !== 它会在字段相同时正确抛出错误。有谁知道这里的错误是什么?

signup.component.html

注册组件.ts

自定义验证器.ts

0 投票
1 回答
11296 浏览

angular - Angular - 表单数组推送特定索引

我有这段代码在表单数组的底部添加一个“停止”。但是我想将新的“停止”添加到最后一个位置,而不是最后一个位置之前的一个位置。

例如,这不起作用(一点也不,我知道数字是错误的。拼接功能不存在于 )

0 投票
1 回答
5840 浏览

angular - 如何将新的表单控件添加到嵌套表单组?

我有这个表单组:

问题是:

如何通过函数以编程方式将新的表单控件(名为school_city)添加到特定的 *group” ?FormArray

0 投票
4 回答
78500 浏览

forms - 如何使用formControlName和处理嵌套的formGroup?

正如 Angular文档所说,我们可以formControlName在表单中使用:

正如他们所说...

如果没有父 FormGroup,[formControl]="name" 会更早地工作,因为该指令可以独立,也就是说,它可以在没有 FormGroup 的情况下工作。对于父 FormGroup,名称输入需要语法 formControlName=name 才能与类中的正确 FormControl 关联。此语法告诉 Angular 查找父 FormGroup,在本例中为 heroForm,然后在该组内查找名为 name 的 FormControl。

无论如何,几个月前我问这个formControlName来弄清楚和之间有什么区别[formControl]

现在我的问题是:如何使用formControlName嵌套的 FormGroups?

例如,如果我有以下表单结构:

使用 将“street”(或“houseNumber”或“postalCode”)绑定到相关 HTML 元素的正确方法是formControlName什么?

0 投票
1 回答
27121 浏览

javascript - 使原始的 Angular 表单控件变脏

Angular 4 中有一种反应形式,一些控件应该在某个时候以编程方式设置。

如何控制原始/脏状态?目前我正在使用原始状态formfoo原始状态,例如:

如果原始/脏应该只指定人类交互并且不能以编程方式进行更改,那么这里更可取的解决方案是什么?

0 投票
1 回答
5148 浏览

forms - removeAt() 上的输入中的 Angular 4 表单数组值不正确

我创建了一个 Plunker 来演示这个问题

https://embed.plnkr.co/pgu7szf9ySwZSitOA5dq/

如果您删除 #2,您会看到 #5 在最后两个框中出现两次。我无法弄清楚为什么会这样。

0 投票
1 回答
146 浏览

angular2-forms - 我可以使用空白地址的一行初始化并进行验证吗

我最近开始使用 Angular 2 和响应式表单。我想要完成的事情很简单:在表单内创建一个数组并让用户将新对象推入其中(比如用户可以添加新地址的用户地址列表 - 标准 FormArray)。这很简单(并且在文档中都有很好的描述),但我也希望能够自动验证用户的输入。我知道我可以通过简单地推动这样的组来做到这一点:

但我有一个代表地址实例的模型,我想这样使用它:

这实际上就是我现在的做法(未经验证)。

我的问题是:我是否可以在每次推送新的空白地址时使用这一行初始化空白地址并以某种方式进行验证而无需明确定义我的验证器?

如果我的问题不够清楚,我会回答你所有的问题。

0 投票
2 回答
2034 浏览

angular - 防止用户以角度反应形式输入字母

我正在构建一个 Angular 4 反应形式。到目前为止,我对最后 4 个 ssn 有以下验证规则:

模板:

这正确地指出了错误。例如,如果我输入“dn4”,我会打印出以下内容:

我如何才能真正阻止用户输入字母或特殊字符?这是否超出了 Angular 的内置功能,我需要构建一些自定义的东西?

0 投票
1 回答
598 浏览

typescript - 从Angular 2中的点击事件将对象加载到表单中

我是角度 2 的新手;我正在使用打字稿对组件进行编程,我有一个“产品”对象,在登陆网站时,用户会看到所有产品的列表(来自 RESTful 端点的 JSON 数据)。如果该用户单击列表中的其中一个产品,它将带他们进入“编辑”页面,该页面的所有详细信息都将填充到表单字段中供用户编辑。我的问题是,我怎样才能在 Angular 2 中进行编程?我在网上看到的大多数示例都在与视图相同的页面(组件)上进行编辑。

  • 我的项目结构:
    • 产品型号
    • product.service ( service ) --> 从 RESTful 端点获取数据
    • product.component ( component ) --> 加载所有产品并显示在列表中
    • edit.component ( component ) --> 显示来自所选产品的所有数据,还使用​​HTML 中的响应式表单控件
    • 使用角度 2 版本 4

我正在考虑使用端点(例如 /api/product?id=xxx),但需要知道如何从 product.component 的选择中传递产品 id 的参数

谢谢!