问题标签 [angular2-ngmodel]

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 投票
8 回答
34493 浏览

angular - 角度 2 的“修剪”指令并反映对 ngModel 的更改

我想创建 Angular 2 指令,它只会从用户在输入字段中输入的文本的开头和结尾开始调整空格。

我有输入字段

和指令

它工作正常,删除空格并更改输入字段中的文本,但问题是 ngModel 变量“fruit”中的值没有更改,它仍然包含开头或结尾带有空格的文本。

我还尝试在 onChange 方法中添加以下内容

并将表单 (blur) 更改为 (ngModelChange),但 ngModel 中的文本不受影响。

有什么建议么?

0 投票
0 回答
227 浏览

angular - 在 Angular 中抽象表单组

简而言之,我想创建文本输入字段的组件,以便替换与该组件一起工作的注释掉的代码。

我的组件读取

我得到了正在设置的字段的值,但没有任何更改使它备份。我很确定我做的事情根本上是错误的,但迄今为止我在网上找到的所有例子都是我试图抽象出来的长手风格。

0 投票
1 回答
3973 浏览

angular - 角度 2 选择 ngModelChange

这个问题是从可访问性的角度来看的。我有一个如下的选择语句并使用 Angular 2。它在使用鼠标时可以正常工作。使用键盘向下箭头键时,我需要能够选择一个选项并按 Enter 键以便执行操作。我如何在 select 语句中实现这一点。

也不对有一个单独的提交按钮来对从选择下拉列表中选择的项目进行操作不感兴趣

0 投票
2 回答
345 浏览

angular - 从表单控件访问选项值以在组件模型中使用

我试图将选项选择的值返回到我的组件类中,以便稍后进行一些逻辑。但是,它返回为未定义,即使我已将[value]="unit"视图中的值硬编码为选项,当我通过它时,onModelChange(unit)它仍为未定义。基本上我需要给我的表单组实例一个值,但还要获取该字段的值来为另一个字段做一些逻辑。

查看新工作条目

班级

我也在控制台中得到了这个:

任何人都明白这里发生了什么?

0 投票
2 回答
2326 浏览

javascript - ngFor 里面的 ngModelGroup?

如何检索NgModelGroup嵌套在 中的的验证状态NgFor

如果我没有NgFor,我可以将组分配给这样的模板变量:

但相反,我想要这样的东西:

问题是我得到addressCtrl的是未定义的。

这是我创建的用于测试它的 plunker:https ://plnkr.co/edit/RXi2T52kynsWLr4fDMVa?p=preview

0 投票
1 回答
670 浏览

angular2-forms - 无法将外部 ngFor 循环中的变量分配给嵌套循环内的 ngModel

我面临的问题是使用变量设置 ngModel 的变量名。详细说明:

此处用作“选项”的 json 是:

数组 'keys' 由 {"a", "b", "c"} 组成,并已在组件类中使用 -
this.keys = Object.keys(this.options);

我在这里所做的是在 html 页面上为每个键创建不同的选项卡,它们的值作为单选按钮,即选项卡是“a”、“b”和“c”,每个选项卡都有对应的选项值(“a1,选项卡 a 上的 a2、a3",选项卡 b 上的 "b1、b2、b3 和 b4" 等等)作为单选按钮。它工作到这一步。

尝试将变量设置为键的值(“a”、“b”和“c”)并返回相应的选定单选按钮作为每个选项卡的值时会弹出问题。为了澄清,我想返回 a = a1 或 a2 或 a3 , b = b1 或 b2 或 b3 或 b4 和 c= c1 或 c2 或 c3 或 c4 或 c5 或 c6 (基于我的选择)。我无法将 ngModel 设置为任何相关变量来实现这一点。我可以直接将 ngModel 设置为“a”、“b”或“c”,但不能使用循环变量,例如键或使用索引的访问键。此外,如果它是相关的,我正在使用 formGroup 这个表单。

任何帮助,将不胜感激。我不确定我是否已经解释得足够好,所以请随时提出问题。(而且我对 Angular 还很陌生,所以我可能错过了一些明显的东西,尽管我已经尝试解决这个问题一段时间了:/)

0 投票
1 回答
332 浏览

angular - ngFor 中的 Angualr2- ngModel 不起作用。模型得到正确更新,但视图中有一些错误

我正在做一个使用 Angular2 创建旅行计划器的小任务。工作流程如下: 用户将输入起点终点以及中间停止点的数量。一旦用户提交“Go”按钮,Planner 表格就会出现,用户可以在其中输入中间停止点以及添加/删除停止点。不知何故,我没有得到所需的输出,如屏幕截图所示。第一个屏幕

第二屏

在添加新的停止点时,这就是我得到的...... 我添加新停止点的输出

期望的输出...... 期望的输出

这就是 Tripdetails 对象的样子。查看对象和视图之间的区别。

控制台图像

代码如下: Trip.ts

TripDetails.ts

app.component.ts

app.component.html

app.module.ts

0 投票
1 回答
1442 浏览

html - 如何绑定组件变量以形成对象实例属性

我不太确定如何将组件类中的变量绑定到表单对象中的属性值。表单需要显示此值并将其添加到 中,ngModel以便它可以成为对象实例的一部分。

我在语法上苦苦挣扎,并不断收到No value accessor for form control with name: 'per_print' Error: No value accessor for form control with name:我认为我需要使用[(ngModel)]="myObject.property"语法的错误,但我不是从表单的输入中得到这个,而是从类上的绑定变量中得到这个。

job_entry是我的对象,我通过表单设置哪些属性。pricePerPrint是类上的一个变量。我想将此变量设置为表单实例属性之一。这个怎么做?我以为我可以通过value,就像在value标签中一样<h4>,但是这个错误仍然存​​在。

0 投票
1 回答
973 浏览

angular - Angular 2 ngModel 无法跟踪/绑定 jQuery Datepicker 小部件/输入元素中的值,为什么?

这个输入元素是一个 Datepicker Widget。日期属性值例如“09/09/1999”被加载到模板视图中,并且在 Datepicker 日历中选择了相同的日期,按预期工作。从组件到模板的绑定是好的。

但是当我在 Datepicker 交互式日历中更改日期时,选择的日期会显示在输入框中,但组件中的日期属性没有更新。当我使用 (ngSubmit)='search(form.value)' 时,表单对象 form.date 的值与以前相同。

是的,我可以使用本地模板变量#date 将输入值传递给组件,例如 (ngSubmit)="search(date.value)"。但是对于多个输入 Datepicker,我可以连接局部变量值并将其参数传递给 search()。

我想知道为什么 ngModel 无法跟踪 datepicker 输入的变化以及更新组件属性或 form.value 的最佳方法是什么?

0 投票
1 回答
730 浏览

angular - 是否可以破解 Angular 2 禁用的输入标签?

例如,我的组件模板中有这部分代码:

在我的组件模块中,我有:

我想只为那些具有“管理员”角色的用户授予编辑此输入字段的权利,并为其他用户禁用此字段(但向他们显示 profileUser.role 的当前值)。

它是安全的解决方案,还是可以破解输入标签属性并获得对禁用字段的访问权限,然后更改其值并使用提交按钮对其进行更新。

如果第二个陈述是正确的,请建议在 ngForm 上显示此类数据的最安全方法,并以 ngModel 双向绑定为界。