问题标签 [angular2-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 投票
1 回答
1760 浏览

angular - Angular2:如何在另一个页面上显示元素的详细信息?

我在第一页上有一个订单列表,我想在另一个页面上显示一个订单的详细信息,以便能够更新它,并在返回主页时保存它。这是我的代码:

app.component.ts:

home.component.ts:

order-details.component.ts:

order-details.html :

0 投票
4 回答
41215 浏览

forms - Angular 2:如何从表单的不同选项中获取选定的值?

我想<select>在表单中使用 a 让用户能够在不同的<option>. 我在这里使用了指南中的技术:https ://angular.io/docs/ts/latest/guide/forms.html 。这是我正在谈论的示例:

在我的 order-details.component 中,我有一个 updateOrder(),它从 myApp.services 调用 updateOrder()。

我的问题是当我试图将数据从表单发送到后端时:所有带有 an 的部分<input>都可以,但不是那些<select>(它返回原始值,而不是选择的那个)。

有没有人遇到过这个或类似的问题?谢谢你的帮助!

0 投票
1 回答
1342 浏览

angular - angular2 - 组件之间的通信

我用 Angular2 搜索组件之间的通信,但我需要的有点不同。我有这样的结构:

父亲 --> 儿子 --> 儿子

我的代码看起来像这样

父组件:

我的学院.html

我只是有一个表格,当用户从 类似这样的东西<instituicao-form>中单击表格列表的某些项目时,我想填充它:<instituicao-list><instituicao-list>

我的 instituicao-form html 只是一个包含一些字段的表单<input type="text" [(ngModel)]="item.idInstituicao"

我只能使用 ng-model at 来做到这一点<instituicao-form> ,并将我的列表<instituicao-form>也放在。

请问有人可以帮我吗?

0 投票
2 回答
15158 浏览

angular - 用于自定义可重用组件的 Angular2 数据绑定

我想要一个由标签和文本框组成的模板。这个模板可以在我页面的不同地方重复使用。为此,我创建了一个 MyTextComponent。我想知道如何将不同的值绑定到组件输入。

例如:

我的文本组件

我的页面组件

如何将 MyTextComponent 输入的 ngModel 绑定到 MyPageComponent 局部变量?

编辑:在添加@Output 后​​尝试,但它没有工作:( MyPageComponent 中的插值是空白的,并且日志打印未定义。但是插值适用于 mytextComponent。任何想法

0 投票
12 回答
192326 浏览

json - Angular 2:获取多个选中复选框的值

我的问题很简单:我有一个这样的复选框列表:

我想发送一个选定选项的数组,例如: [option1, option5, option8]如果选择了选项 1、5 和 8。这个数组是我想通过 HTTP PUT 请求发送的 JSON 的一部分。

谢谢你的帮助!

0 投票
3 回答
18283 浏览

validation - FormBuilder 控件导致“检查后表达式已更改”异常

我有一个通过DynamicComponentLoader::loadIntoLocation. 表单代码如下:

您会注意到某些表单没有验证器(据我所知,这与 using 相同Validators.nullValidator,我都测试过)。

在我的模板中,我有以下代码(对于每个控件):

第一个没有验证器的控件在碰到!phone.valid模板部分时会抛出以下异常两次:

在任何时候我都没有触摸控件或this.editForm在初始创建之后,所以,就我的代码而言,什么都不应该改变。

我知道我可以通过调用来抑制错误,enableProdMode()但我宁愿解决问题而不是隐藏它。

编辑(2 月 8 日):此后我尝试将模式的内容移动到单独的页面,但错误仍然存​​在。这表明该问题与我创建和加载模式的方式无关,而是与 ControlGroup 或 FormBuilder 相关。

问题的Plunker | 无模态的 Plunker

0 投票
2 回答
4046 浏览

angular - 双向数据绑定不在选择字段上

我的 Angular2(测试版)应用程序中的 2way 数据绑定有问题。控制台中没有错误,因此很难猜测为什么以下代码段适用于输入文本字段但不适用于选择字段,有什么想法吗?

{{model.quantity}} 不会在所选项目更改时更新,但 {{model.name}} 在文本字段中会更新。

另一方面,当我做这样的事情时:

在 ts 文件中:

在视图模板中:

控制台显示每个更改事件的值。

0 投票
2 回答
1245 浏览

forms - Angular2基于模型的父/子表单

我是 Angular2 (beta1) 的新手,我想实现一种简单的可编辑网格,由 2 个组件组成。在这里,我使用两个假数据组件来保持简单。它们是(见这个 Plunker:http ://plnkr.co/edit/5cZfLTIlhLc82wWV4PQI ):

  • 父组件,名为contact. 假设它代表一个有名字的联系人。
  • 子组件,名为entry. 假设它代表一个联系人的条目,其中每个联系人可以包含 0 个或多个条目。每个条目都有一个地址和一个邮政编码。

我想创建一个表单,用户可以在其中编辑联系人的属性及其子条目:他可以添加新条目、删除现有条目或编辑现有条目。

为此,这两个组件的视图都提供了一个基于表单的模板。我可以想到这个数据流:

  1. 联系人:用户编辑表单,然后单击提交按钮以保存整个内容。因此,我可以让一些代码处理提交按钮并发出一个事件作为组件输出。联系人有一个entries 数组属性:因此我可以ngFor在其模板中使用一个指令来为每个联系人呈现一个入口组件。

  2. entry:该条目具有属性addressCtlzipCtl这些属性表示包含在ControlGroup表示整个表单中的控制指令。此外,我需要将几个属性绑定为组件 (addresszip) 的输入,以便在父模板中我可以执行以下操作:

    /li>

现在,我不清楚如何塑造表示控件输入的“模型”属性与“表单”指令属性之间的关系。我应该能够通过[...]绑定从父组件获取地址和 zip 值,并通过子组件触发的事件(例如模糊?)将更新的值向上传递。这在 NG2 世界中有意义吗?无论如何,我在这里遗漏了一块:如何将表单控件值连接到模型属性值?任何人都可以更清楚地说明这一点或指出一些好的文档吗?

0 投票
1 回答
697 浏览

angular - angular2表单验证器中的验证描述

浏览我看到的 angular2 api Control 类

我了解该功能的作用。

我想知道是否无法将验证失败时出错的描述放在函数中。

例如,我想知道该功能是否不能

其中描述描述了错误原因如下所示

我无法在 API 中找到任何类似的验证器。如果存在,如果可以共享链接/说明,我会很高兴。

期待看到您的反馈。

0 投票
2 回答
12900 浏览

angular - #form="ngForm" 和 [ngFormModel]="form" 的区别?

两者有什么区别:

你什么时候使用一个而不是另一个?