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

angular - 创建一个可重用的 FormGroup

我知道将自定义控件创建组件,但我不知道如何创建自定义

同样我们可以通过实现ControlValueAccessor和使用自定义组件<my-cmp formControlName="foo"></my-cmp>来做到这一点,我们如何才能为组实现这种效果

两个非常常见的用例是 (a) 将长表单分成多个步骤,每个步骤在一个单独的组件中,以及 (b) 封装一组出现在多个表单中的字段,例如地址(国家、州、城市的组、地址、楼号)或出生日期(年、月、日)。


示例用法(不是实际工作代码)

Parent 具有以下使用 构建的表单FormBuilder

父模板(为简洁起见,不可访问且无语义):

现在这AddressFormGroupComponent知道如何处理其中包含这些特定控件的组。

0 投票
0 回答
95 浏览

angularjs - 为什么 AngularJS 表单在单击另一个字段并更改值之前不会更新有效性?

早上好!我对 AngularJS 还是很陌生,并没有找到我可以完全理解的答案。

有一个结构如下:

  • 姓名
  • 电子邮件
  • 颜色[选项红色,选项蓝色]
    • 仅当为“颜色”选择选项蓝色时才会出现的必填字段

选择Option Blue时,会出现第二组字段。但是,当取消选择“选项蓝色”时,必填字段再次被隐藏,但表单仍然“看到”该字段为空,直到我单击另一个字段(如“名称”)并输入另一个值。

每次事件侦听器 (?) 触发时都会检查布尔值$form.$valid ,即 onItemSelect 和 onItemDeselect 以及 onSelectionChange。

根据我对 Angular 的了解,我......认为另一个摘要(?)循环尚未开始(?),直到我单击输入另一个字段?对不起所有的问号 - 我的知识有点脆弱,我不能完全粘贴源代码的原因。

我的理解正确吗?如果是这样,有没有推荐的方法来解决这个问题?

编辑:我在下面添加了一些带有虚拟变量和对象名称的示例代码,以及一些伪代码来总结更大的代码部分。

我已经设置了一些调试警报。我注意到当我取消选择 OptionBlue 时,警报将包含以下行: requiredFieldifOptionBisChosen: object Object

但是,在单击另一个字段并输入任何值时,表单将刷新(?)有效性,它会说: requiredFieldifOptionBisChosen: null

0 投票
1 回答
1960 浏览

angular - 如果值为空,则更新 formGroup 值

我有一个有角度的项目,它的表单带有不同数量的表单控件。这是我的模板的外观:

这按预期工作。我现在正在尝试实现以下内容:如果控件值为空,则该值应更改为&nbsp;,该值不应显示在表单中(因为最终用户不会理解这意味着什么)。这甚至可以在 Angular 形式中实现吗?

0 投票
2 回答
1170 浏览

angular - 角度 2:只要 async-validator 仍在运行,就防止表单字段变为有效

简短的事情:我有反应形式的输入字段,它们都由几个同步验证器(最小值,必需等)验证。

此外,我在表单本身上有一个去抖验证器。此验证器可能会将多个输入字段设置为无效。在这种情况下,输入字段在有效(绿色边框)和无效(红色边框)之间闪烁。

这种行为是由于同步验证器会将输入字段呈现为有效,但 250 毫秒后异步验证器将再次声明这些输入无效。

所以基本上我的每个密钥库都有闪烁的输入字段(只要我输入足够慢)

解决方案: ?

我需要的是让所有验证器在同一个滴答声中执行(在等待去抖动时间之后)。即使我同时单独对所有验证器进行去抖动,边框颜色也会有轻微的闪烁。

或者我可以让表单上的所有输入在 250 毫秒后去抖动,以便表单后面的所有验证器和模型只有在 250 毫秒的去抖动时间后才能获得信息。将 debouceTime(250= 应用于 valueChanges 并不能解决问题,因为 valdator 已经完成了他们的工作。

0 投票
0 回答
135 浏览

angularjs - 字符串数组的角度动态形式

我有一条新闻,里面有多个段落。我想要做的是为每个段落添加一个表单控件,以便我可以单独更新它们。

这就是数据的样子

我的模板看起来像这样

在我的组件中,我现在有这个

如何为每个段落单独分配控制器?

0 投票
1 回答
10586 浏览

html - Angular 4 - 使用 ngFor 动态创建输入类型


因为我得到了一个包含许多不同输入字段的表单,为了避免拥有一个巨大的 html 模板,我想将字段数据放在对象中并使用ngFor.
到目前为止,这是我的代码。

stub.ts - 这是我存储数据的地方

组件.ts

模板.html

这些是我得到的输入字段: 在此处输入图像描述

这是呈现的 html 代码: 在此处输入图像描述

现在,我得到了一些不起作用的东西:

  1. 即使在呈现的 html 上正确设置了所有属性,占位符值也会采用模型值
  2. 占位符的行为onfocus并且onblur不起作用
  3. 最重要的是,如果我尝试提交一些值,这些值不会传递给控制器

现在,如果我使用静态设置所有属性的输入类型,每个问题都会消失。有什么方法可以实现我想要的吗?

谢谢!

0 投票
1 回答
414 浏览

javascript - angularJs按钮点击表单错误刷新页面

我正在尝试实现点击添加一个新的输入字段。所以,点击添加按钮后有2个按钮可以添加和删除输入框,它应该添加一组输入框,点击删除按钮它应该删除特定的输入盒子。但是在单击“添加”时,它只会添加 1 个输入字段并刷新整个页面,并且该页面的表单数据显示在搜索栏中,但在另一侧“删除”按钮工作正常。我猜这两个功能都是正确的,但我不明白有什么问题?我该怎么办?我不想添加按钮来刷新页面并在搜索栏中显示数据。而且点击后必须添加很多输入框。这里需要做什么。请帮忙!!

这是我的代码:

索引.php

角脚本

0 投票
1 回答
5856 浏览

angular - Angular 4反应形式-FormArray中的FormArray无法获取路径

几天来,我一直在尝试创建一个表单,该表单将允许用户创建产品,同时产品的变体可能与父产品具有不同的价格。例如,大部件是 10 英镑,小部件是 5 英镑。每次我最终得到的是 FormArray 中的一个 FormArray,换句话说,我有一个具有一系列变体的产品,这些变体有价格,但也有一系列属性。当我尝试添加控件时出现问题,我可以让变体价格显示得很好,但是我无法获得添加变体的路径。属性控件,我只是得到一个关于 ngFor only 工作的错误数组不是 [Object, Object] 或控件为空...我遇到的错误比我记得的要多!不管怎样,我的代码已经被重写了很多,

首先是我的 oninit 中的表单:

为主产品添加和删除属性的部分,效果很好:

我添加变体的部分有效,它仍然具有我用来尝试将添加到主要产品的属性复制到变体中的代码,我认为这有效,但无法访问中的值为了显示它们,variations.attributes 不适用于路径。

向变体添加属性的部分不起作用,这是我在 component.ts 中遇到问题的地方

最后,我的 html 更是一团糟,哈哈:

0 投票
1 回答
1288 浏览

angular - 将任意元数据添加到 FormControl

在声明表单模型时,有没有办法FormControl在 Angular2+ 中添加任意元数据?

就像是:

我想使用此元数据来存储特定控件的错误消息。

注意:我可以将错误消息存储在一个单独的变量中,但是我的每个字段都显示有一个自定义组件,该组件只接收一个@Input:FormControl 的实例。我想避免声明第二个输入来传递错误消息。

0 投票
1 回答
2749 浏览

javascript - ng-touched 未在 .markAsUntouched 上重置自定义控件

我在 Angular 2 表单中有一个简单的自定义控件,当您编辑该字段然后通过.markAsUntouched重置它时,它不会删除ng-touched类。

示例表单如下所示:

在此示例中,独立输入控件正确复位。app-textbox 组件的 html 如下所示:

表单的重置如下所示:

我已将整个应用程序放在这里https://github.com/jmarbutt/ng2-angular-issue

在触摸两个输入字段然后点击重置后,表单看起来像这样。 在此处输入图像描述

此时它们都应该是白色的。

所以我的问题是为什么 ng-touched 没有在markAsUntouched上正确删除?