问题标签 [ngx-formly]

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 回答
550 浏览

angular-formly - 自定义模型值/输出 ngx-formly

我正在尝试使用 ngx-formly 来呈现表单。(使用 FormlyFormConfig 对象)表单正在正确呈现,我将模型值作为 json 对象获取。

但是有没有可能我可以将值设置为 FormlyFormConfig“defaultValue”字段,而不是将表单字段值设置为模型值?

如果没有,是否可以为模型设置其他属性。

这是因为我的表单与来自后端的字段 id 相关联,并且希望将值设置为相同的 formfieldconfig,以便后端知道这些值属于哪个字段。

这是示例

0 投票
0 回答
259 浏览

angular - 以角度形式动态添加键/值对

我正在使用ngx-formly基于 JSON 动态构建 UI。我目前在实现添加/删除功能时遇到了一些问题key/val

由于我的所有键/值都是动态添加到 JSON 中的,因此我需要key根据索引找到并删除它。我能看到this.field.parent物业上的钥匙

我添加/删除的按钮基于扩展类型。不确定这是一种好方法还是更好的方法?

在此处输入图像描述

Stackblitz 样本

0 投票
2 回答
38 浏览

html - 如何使引导程序表现得像带有粘性标题的表格?

这是我的引导程序,我需要表现得像一张桌子。我还需要标题列在滚动时表现得像一个粘性标题。仅使用引导程序就可以做到这一点吗?

我不使用实际表格的原因是因为这将进入一个正式的对象并且表格有问题

https://stackblitz.com/edit/angular-eyo4a8-gnrknm?file=app%2Fdatepicker-date-class-example.html

0 投票
1 回答
1016 浏览

javascript - 验证最小值不超过 Angular 应用程序中提供的最大值

我在角度应用程序中有两个输入字段,最小值和最大值。每当用户输入的最小值大于他/她提供的最大值(或最大默认值,如果他们没有提供值)时,我想显示一条错误消息。

我的形式在形式之内。

我试图创建一个自定义验证器来检查两个表单控件并返回一个带有错误消息的对象 - 但是,该解决方案似乎不起作用。

然后在我的formlyFieldConfig中:

我的字段如下:

任何帮助将不胜感激。

0 投票
1 回答
1889 浏览

angular - 在 ngx-formly 的帮助下,数组 Angular 9 中的动态表单

尝试实现:根据用户使用 ngx-formly/material 选择区域设置 JSON 的动态表单。如何用我的对象数组“this.fields2”映射字段?

在我的 component.ts 中,我有:

我的 component.html

0 投票
1 回答
442 浏览

angular - 将 NGX-DataTable 与 NGX-Formly 一起使用时如何向模型添加新行

使用 Formly,我实现了与此处找到的解决方案类似的解决方案: https ://formly.dev/examples/advanced/datatable-integration

这适用于显示现有数据,尝试添加新行时会出现问题。我需要一种更新 FormGroup 列表的方法,我目前通过再次添加第一行来欺骗它。从视觉上看,它看起来是正确的,但它总是会绑定到错误的行。

我在这里有一个例子(上面例子的修改版本): https ://stackblitz.com/edit/formly-add-ngxdatatablerow?file=src%2Fapp%2Fapp.component.ts

0 投票
1 回答
246 浏览

javascript - 如何通过 Angular 在 JSON 文件中使用变量?

我想将值${field.formControl.value}赋给我的 JSON 对象中的一个变量,即{{fieldName}}. 这是我的 JSON 对象:

我正在使用ngx-formly构建动态表单,并且我想显示基于动态语言的错误。如何{{fieldName}}为我的 JSON 中的值分配值?

这是我制作动态形式对象的方式。

控制来自 forEach 循环fields.forEach(control,index)

0 投票
1 回答
86 浏览

angular - 嵌套表单字段值不会反映在提交上

我在我的项目中使用 ngx-formly 来创建基于动态选项卡的表单。

我有一个类似的模型,如下所示:

我已经使用选项卡创建了表单字段结构,并重复了演示中的示例。这是同一个Demo的 stackblitz演示

每当我尝试在其他选项卡中打开嵌套元素时,都会遇到一个问题,嵌套元素字段值不会反映在提交中。

重现问题:

只需点击Nested按钮

然后在嵌套选项卡中,默认情况下不填充模型字段。

任何建议,我在这里做错了什么?

谢谢!!

0 投票
1 回答
947 浏览

javascript - 无法在 Angular 中使用自动完成字段执行更改事件

我正在使用自动完成字段来填充值。我在表达式属性中使用了 templateOptions.change 来设置其他字段的值,但我注意到只有在取消选择自动完成的值时才会调用 change 事件。当我试图从自动完成更改事件中选择值时,不会调用。

我创建了一个 stackblitz 链接来实现我的要求,我注意到更改事件仅在我们更改自动完成下拉列表的值后调用,如果它是空白的,然后我们选择任何不调用更改事件的值。我想知道是否有 onselect of dropdown 而不是 change 事件的选项。我也尝试将钩子与模板选项一起使用,但没有成功,如果有人可以提供帮助,那将很有帮助。谢谢

请找到此链接:https ://stackblitz.com/edit/angular-bf6g6m-6twrjw

第一步:

当我从自动完成下拉列表中选择第一个值时:观察是没有更改事件被调用

在此处输入图像描述

第二步:

现在,当我从下拉列表中选择另一个值时:观察是更改事件被调用。

在此处输入图像描述

0 投票
1 回答
217 浏览

angular - 如何使用网格剑道和 ngx 正式创建自定义模板?

我正式使用 kedo grid 和 ngx 来显示数据。

有4个文件。kedo.ts 和 kedo.html 用于自定义模板,component.html 和 component.ts 用于使用模板。我试图尽可能简化代码,但数据仍然未定义。

kedo.ts

kedo.ts

组件.ts

组件.html