问题标签 [angular2-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 回答
611 浏览

angular - 我可以在多个 Angular2 表单中创建和重用 ControlGroup 组件吗

我正在编写一个 Angular 2 应用程序并使用会员系统。我的注册表单中有一个控制组,其中包括一个密码和一个确认密码,上面有各种登录信息。此 ngForm 上还有一个电子邮件控件。

这是显示表单控件和 FormBuilder 用法的构造函数代码。还有更多代码可以生成错误消息等。

我有一个仅包含 Password 和 ConfirmPassword 控件的 ResetPassword 表单。然后我还有一个 AccountSettings 页面,除其他外,您可以更改密码,它有这两个字段作为 ControlGroup 以及许多其他字段,即名字和姓氏、电话号码等......这两个领域在所有三个地方都基本相同,并且在深度验证方面有所不同。它们的密码必须包含小写、大写、特殊和数字等,并且 ConfirmPassword 必须匹配。我已经完成了所有这些工作,但是我在所有三个地方都重复了代码;一种非常 WET 的方法。

我想我想要做的是从这个嵌套的 ControlGroup 中创建一个组件,然后在 FromBuilder 中使用它,将它添加到一个更大的 ControlGroup 中。所以我的问题是......为了保持一切干燥,有没有办法创建一个仅由这两个控件组成的组件/控制组,然后将该组件/控制组作为更大表单的控制组的一部分包含在内在所有三个位置都使用它,并且不重复逻辑三次。

0 投票
3 回答
7366 浏览

forms - Angular 2 - 使用带有可选字段的 ngControl

我很难在表单中同时使用 *ngIf 和 ngFormModel 来验证所述表单。

用例是这样的:根据用户输入,隐藏或停用表单中的某些特定字段。但如果显示这些输入,则必须对其进行验证。

当只需要基本验证时,我可以采取一种或另一种方式:

  • 如果仅需要输入,则使用 A-OKngControlrequired
  • 如果需要特定格式,则可以使用该pattern属性。它不是 Angular,但它有效。

但是为了实现更复杂的验证,我一直在尝试使用ngControl耦合ngFormModel来使用自定义检查。我使用了以下页面上的代码片段:

如何在 angular2 中添加表单验证模式(以及那里引用的链接)

Angular2 表单:验证、ngControl、ngModel 等

我的代码如下:

HTML

打字稿

即使使用 *ngIf 从模板中删除了输入,构造函数仍然在引用控件。这反过来又阻止了我使用 [disabled]="!formState.form.valid",这myForm是可以理解的 INVALID。

我的目标是使用 Angular 2 吗?我确信这不是一个不常见的用例,但是根据我目前的知识,我看不出如何使它工作。

谢谢 !

0 投票
11 回答
111853 浏览

typescript - 基于Angular2中的枚举选择

我有这个枚举(我正在使用TypeScript):

我想在我的表单中构建一个选择,对于每个选项,枚举整数值作为值,枚举文本作为标签,如下所示:

我怎样才能做到这一点 ?

0 投票
10 回答
132344 浏览

angular - Angular2 - 将文本框集中在组件加载上

我正在 Angular2 (Beta 8) 中开发一个组件。该组件有一个文本框和一个下拉菜单。我想在加载组件或下拉更改事件后立即在文本框中设置焦点。我将如何在 angular2 中实现这一点。以下是该组件的 Html。

0 投票
2 回答
1862 浏览

angular - rxjs with angular2: into component class 如何将输入字段数据更改转换为rxjs流

据说我们可以使用 rxjs 将任何内容转换为流,这里我想将来自输入字段的数据转换为流,然后订阅它,angular2 中有使用 valueChanges 事件的方法

但是当我尝试像这样在组件类中创建流时

无法识别创建,我如何在 rxjs 中执行此操作,因为值更改为输入字段,它与 angular2 形式有关,还有什么有用的功能为此创建流

0 投票
3 回答
13463 浏览

angular - 如何在表单提交时创建弹出窗口

我有一个来自第三方的表格(mailchimp/mailerlite)。我遇到的问题是,当我单击按钮时,它会在新窗口中打开表单。我希望它弹出而不是打开一个新窗口。谁能给我一些指示?

形式

除了一些 CSS,我还在我的索引文件中包含了一个 js 脚本。

下面是我想要完成的工作示例。请注意,下面的网站是使用纯 HTML5 创建的,但我正在尝试切换到 Angular2。

单击“今天注册我”按钮:
http ://www.hedaro.com

0 投票
0 回答
619 浏览

angular - 如何使用 NgSwitch 构建动态表单?

我正在尝试从我的 json 文件构建一个动态表单(textarea 元素)

我使用 ngSwitch 作为元素类型

但我有一个错误

Plunker - Form 有什么问题?

在此处输入图像描述

PS<md-input-container>产生错误

0 投票
1 回答
6024 浏览

javascript - 强制更新角度 2 中的属性绑定

考虑以下组件

输入应始终是带有两位小数的数字。然而,情况并非总是如此。尝试删除最后一个零,该字段不会更改为我想要的 0.00。我知道它不起作用,因为 formattedN 值没有更新,这意味着属性绑定没有更新,因此输入的值没有更新。

在 plunker 中运行示例:http: //plnkr.co/edit/Vyi4RKladslrdZslZQhm

有没有人有一个很好的解决这个问题的方法?

0 投票
10 回答
95614 浏览

html - 如何在角度 2 中将输入值转换为大写(传递给 ngControl 的值)

我正在尝试使用 ngControl 在角度 2 中的值来验证输入字段。我需要验证用户是否始终以大写字母输入值。

现在我们需要将用户输入的值转换为大写。但我正在使用 ngControl 处理来自输入字段的值,而不是 ngModel(考虑到我可以使用 ngModelChange 事件将值更新为大写。)

那么转换ngControl使用的值的最佳且低成本的方法是什么。

0 投票
0 回答
1280 浏览

angular - angular2 ngFormControl 选择不起作用

我在 .ts 文件中的代码片段

我在 .html 文件中的代码片段

我的问题

ngFormControl 和验证在 fname 和 lname 中按预期工作,但是对于性别,当我更改 select 的值时,它始终处于 ng-pristine(不是 ng-dirty 状态)和 ng-invalid

为什么对<select>元素所做的更改没有触发.....我不知道是什么问题,任何可以帮助我或指出我所缺少的人

根据马丁评论

<select>我通过添加以下代码确保 signUpForm.value 不反映控件的更改

输出{{checkSignUpFormModel}}

{"fname":"max","lname":"pay",,"gender":""}

虽然我对 fname 和 lname 文本框的更改正在反映,{{checkSignUpFormModel}} 但对性别的更改没有影响

NdFormValidation.gender 是这样的