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

angular - 跨多个组件传递 FormGroup

我在 Angular 2+ 应用程序中使用反应式表单,并且需要将主 FormGroup 传递给多个组件,以便可以在单独的组件中管理表单的不同部分,例如页眉、页脚等,并由这些不同的组件填充。这就是我目前的做法:

我想知道,如果这是一个正确的方法,因为我确实看到了这个代码的警告/错误:

ERROR 错误:ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。以前的值:“真”。当前值:“假”。

在这条线上:

<form [formGroup]="orderForm">

有什么建议么?谢谢。

0 投票
0 回答
486 浏览

ionic2 - Angular2如何将数组传递给作为反应形式一部分的组件

我正在使用 Angular2 反应式表单(这是一个简历表单),表单上有一些字段,然后是qualifications我需要将数组传递给的组件(以便使用循环我可以显示用户的资格)。

这就是我将数据传递给组件的方式qualifications

这是一个qualifications组件的 html

这就是限定数组的样子

我无法理解如何将对象数组传递给该组件,以便它可以在循环中显示资格

ngOnInit我调用的addQualification函数如下

我遇到的问题是表单只显示数组的第一个对象并且没有循环

0 投票
8 回答
102538 浏览

angular - Angular Reactive forms:如何在提交后重置表单状态并保留值

以 Angular 反应形式。提交成功后如何只重置表单的状态

这是过程:

  • 创建表单并setValue从服务结果
  • 修改值并提交表单
  • 如果表单正确提交给服务,则重置并保留值

如何保持已修改的值并将表单重置为其原始状态。

form.reset() 只是清空表单。但如果我不调用它,状态不会重置,例如我的验证取决于表单状态类(原始、脏、有效等)仍然存在。

0 投票
2 回答
1526 浏览

angular - 反应式表单 - 嵌套在标签中的单选按钮

我很难理解为什么在一种情况下 Reactive Forms 不能按预期工作。

我的模板中有一个带有单选按钮的按钮组,每个输入都嵌套在一个标签中。当我选择一个单选按钮时FormControl,我的相应单选按钮FormGroup不会更新。

当我将输入控件放在标签之外时,一切都按预期工作。

我必须做些什么才能使这个工作适用于我的示例?

这是代码:

app.component.html :

app.component.ts :

编辑:显然使用 jQuery 存在问题。当我从 .angular-cli.json 中删除 jQuery 时,一切正常。

0 投票
1 回答
2381 浏览

angular - 直接访问 FormControl 元素而不是使用 form.get

给定 a 中的以下代码片段FormGroup

<input type="email" class="form-control form-control-lg" formControlName="email" placeholder="email">

无论如何我可以使用引用变量(例如)而不是使用来访问模板中(而不是从 .ts 文件)中输入的值,这form.get('email')...有什么好处吗?

0 投票
2 回答
18337 浏览

angular - 在angular2中设置无效的无效表单控件

是否可以在angular2中设置为无效的表单控件?(使用表单生成器)

例如。我有表单-> exampleFrom & field-> exampleControl

我试过这个,没有成功:

0 投票
0 回答
152 浏览

angular - 避免 Typescript for 循环中的阴影

我有以下组件,它应该根据要求检查的代码以及传递给它的控件的条件显示错误消息:

这显然是行不通的,因为变量arePristinehaveError被遮蔽,因为我正在使用let运算符。但是,TSLint 不想让我使用var!我将如何正确地做到这一点?

0 投票
1 回答
2344 浏览

angular - Angular2 FormGroup验证 - 标记特定控件无效

我有一个使用 FormGroup 的 Angular 2 Reactive 表单。我需要比较两个字段的值,因此我在创建时将验证器传递给 FormGroup。验证效果很好:

在我输入无效值后,form.errors.duplicate 字段被正确填充,并且表单组ng-invalid在 DOM 中用 CSS 类标记。

我唯一的差距是我希望将特定的表单控件标记ng-invalid为该组级验证器失败时。有没有办法做到这一点?我试图弄乱从验证器函数返回的对象以匹配目标表单控件的嵌套层,但无济于事。

在短期内,当表单无效时,我可以通过在特定元素上添加额外的标记和样式来解决它,但理想情况下,我希望能够摆脱它,并解决标记中的特定错误代码仅用于该控件,而不是上升到父表单组级别:

0 投票
1 回答
38 浏览

angular - MdRadioButton 内的 MdInput 不会更新表单中的值

我正在尝试将一个嵌套在一个MdInclude内部MdRadioButton,也就是说,如果我选择一个特定的按钮/值,则会启用一个额外的输入字段(与该特定按钮相关联),例如

对我来说这是一个很常见的情况。

我尝试的方法如下:

这是相关的脚本:

(这是一个plnkr,用来玩弄)。该表单似乎正在工作,但在提交时address不包括值(假设我选择了“不同地址”)。在检查时this.form.controls我注意到它disabled仍然设置为true,这可能是该值不存在的原因。

但是,我在上面的事件处理程序中明确启用了该控件,那么我在这里缺少什么?

0 投票
5 回答
45354 浏览

angular - 基于FormArray中的索引的Angular 4 patchValue

我希望formArray在用户在创建的空控件中添加值后更新 a 。

formArray目前,当用户选择添加一个新项目时,我使用空值构建。

这适用于初始创建和更新已添加的项目。问题在于添加了空值的新项目。当我添加一个新项目时,我需要在properties.key

在保存该新项目的方法中,我添加了一个patchValue

但是,patchValue它根本不起作用。当我尝试更新该新值时,尽管这些值已保存到 firebase,但我仍然会返回值为空的值或在初始值上设置的保存值,BuildItem()而不是在patchValue

我在角度FormArray文档中看到

它接受一个与控件结构相匹配的数组,并将尽最大努力将值与组中的正确控件相匹配参考

这是否意味着它可能会也可能不会更新该值..它会尽力尝试?我想如果我可以为我想要修补的值添加索引,那么它根本不应该是一个问题。喜欢removeAt(idx)

所以如果我能写出类似的东西

但不确定我能做到这一点.. 很确定以这种形式不可能。有什么方法可以专门针对被修补的项目,formArray或者我可能没有正确理解这一点。

我可以通过将新值推送到formArray

但是我必须添加

为了删除对空 build 的初始控制,这似乎不是任何好的代码。