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

javascript - 如何使禁用的必填字段使反应表单无效

我有一个像这样的简单反应形式:

我希望secondInput最初被禁用,以便用户必须先填写firstInput。然后,当我的组件检测到已提供时,我会像这样firtInput激活secondInput

但是使用上面的代码,当用户在里面输入时firstInput,myForm 是有效的,因为应该使其无效的 secondInput 规则被禁用......

我怎样才能达到预期的行为?那是secondInput在模板中禁用,而它的验证器保持活动状态。

0 投票
1 回答
1823 浏览

angular - 访问 FormArray 中的对象属性并更新 Angular 4 中的值

我想从表单访问对象属性和绑定值。到目前为止,我尝试了不同的选择,但没有成功。这就是我到目前为止所拥有的,我已经简化了下面的代码:

表单组:

查看代码:

上面的代码出于这个问题的目的进行了简化,场景不同,但最终像这样我想更新对象内部的价格值。在我进行研究时,我已经看到了很多方法,但似乎没有什么对我有用。

0 投票
0 回答
626 浏览

typescript - Angular2/Ionic2 动态表单错误:找不到具有名称的控件并且无法分配给属性验证器

在我的离子项目(最后一个版本和最后一个角度版本)中,我使用动态表单来从我的休息 api 构建动态表单。

这个想法是我的后端服务器以 json 格式的表单输入和我需要的所有属性(整个表单)返回。目的是创建动态表单,如果在我的后端编辑表单(例如添加输入或属性),我不必更新和“重新构建”我的 ionic 应用程序以便进行更改考虑到。

这就是我按照动态表单流程/教程所做的。

首先我在ionic app.module.ts文件中声明 的导入import { ReactiveFormsModule } from '@angular/forms';,然后在导入中导入模块:

然后我在名为的文件夹中创建了表单基本模型(相对于问题模型):/src/models/form-base.ts

/src/models/form-components例如,我在名为的子文件夹中创建了 sub*form 组件text.js(相对于文档中的 question-textbox.ts 文件):

我有/src/providers/rest-api/ folder名为的服务form-service.ts

作为文档中问题表单组件ionic generate component的描述,我通过运行命令(ionic cli)来创建我的组件。中的一个组件/src/components/form-base/

form-base.ts

form-base.html

然后我让另一个组件扩展form-base名为的组件dynamic-custom-rest-form

ts:

html:

最后,在我的页面中,这里是我的离子视图的页面组件,我有这个:

src/pages/home/home.ts

src/pages/home/home.html

调用表单服务时出现两个错误

第一的:

错误:找不到名称为“input[inputName]”的控件

第二个错误:

TypeError:无法分配给“input [inputName]”上的属性“validator”:不是对象

通过遵循 Angular 文档,我真的不明白我的错误在哪里。

谢谢。

0 投票
2 回答
1446 浏览

javascript - 刷新页面后的Angular 4 Reactive Form启用字段

我有一个在角度 4 中声明的反应式

默认情况下,如果我的表单填写了数据,则表单字段被禁用(电子邮件、用户名)。我面临的问题是,如果我刷新页面,表单字段将显示为已启用。

(已编辑)

}

0 投票
1 回答
196 浏览

angular - 如何使用单个提交按钮 angular2 触发多个反应式表单验证器

我在单个视图中有两个表单,但只有一个提交按钮。我想在不填写任何数据的情况下单击提交按钮来触发两种表单中的验证。有什么办法可以做到这一点

0 投票
2 回答
14846 浏览

angular - 如何使用 Angular5 检查表单控件的变化

我使用反应形式,我有多个输入,我想为三个输入显示一个错误,验证是;字段为必填项,不应输入空格。

组件.html:

组件.ts:

组件.css:

验证工作正常,也就是说,当字段为空或我输入空格时,它们会跳转。我的问题是我必须添加更多表单控件,如果它包含消息,则可能难以辨认:

有没有办法通过打字稿来控制这些值,也就是说,每次控件中的值发生变化时,它都由 typeScript 中返回 true 或 false 的函数控制,并且如果只在我的 div 中询问该函数的值?

0 投票
1 回答
551 浏览

angular-material - angular material 2 stepper mat-step - 包含在父 div 中

在我的表格中,我有一系列申请人。对于每个申请人,我想展示一个“mat-step”(角度材料 2 步进器)并有一个带有 formArrayName="applicants" 的父 div。但是当我用 div 或 ng-container 包围“mat-step”时,它不会显示该步骤。

我希望上面的代码能够显示申请人的垫步次数。

垫步不显示

0 投票
5 回答
23723 浏览

angular - 获取表单控件的名称

我正在使用角度的反应形式,我需要将开始日期“开始日期”与结束日期“结束日期”进行比较,这两个控件都在“dateLessThan”函数中进行了验证,但问题是我不知道如何要求控制正在评估

在这里,我需要知道比较日期的控件名称:

0 投票
1 回答
1015 浏览

angular - 以反应形式使用的自定义组件 MdDatePicker

我正在尝试创建一个自定义组件以在有角度的 formGroup 中使用。

这是我想使用这个自定义组件的方式:

问题:在主组件(包含此表单)中,当我的自定义组件中的值发生更改时,模型没有更新,这涉及 MdDatePicker。虽然我使用的是 ControlValueAccessor。

我的客户组件的 HTML 模板:

在这里,您可以阅读我的组件的打字稿代码:

我在这里做错了什么?

0 投票
1 回答
3624 浏览

angular - FormGroup Angular 问题(类型缺失)

当我运行命令ng serve --prod我有这个问题:

ng:///home/cristopher_ramirez/Development/angularProjects/lazyPagesRouterTest/src/app/service-order/add-service-order/add-service-order.component.html (28,51) 中的错误:类型参数' FormGroup 不可分配给“ServiceOrder”类型的参数。
“FormGroup”类型中缺少属性“cylinderRefsList”。

请注意,这只发生在我使用 --prod 命令时。

这是我的 HTML 代码(add-service-order.component-html):

我正在关注本指南 https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 所以你可以看到我实际上在表单组中添加了 cylinderRefsList(我的 TS文件与指南几乎相同)唯一的区别是我使用模型而不是界面。

编辑 1:这是我的 TS 文件