问题标签 [angular-template-form]

表单包含电话号码输入和发送传真复选框字段。电话号码必须存在于用户目录列表中才能发送传真。点击保存按钮后需要进行表单验证。

1. 如果用户未选择发送传真选项并保存，则不需要电话号码验证。
2. 如果用户选择了发送传真选项并保存。然后使用 API 调用检查电话号码号码是否存在于目录列表中。如果电话号码不在目录列表中，则显示错误消息。

示例屏幕

是否可以为模板驱动的表单实现交叉提交的自定义异步验证器？

如果您对这篇文章有任何疑问，请随时向我提问。

有一个模板驱动的表单，在这个表单中，有一个下拉菜单。我想从后端显示数据到下拉列表。

这里的数据来自后端appliesWhenData。

如果我登录appliesWhenData它会打印：

到目前为止我已经尝试过：

只有我需要在 drop 中显示选定的数据。来自后端的选定数据在appliesWhenData.fieldListDetail其中，并且将存在的列表是fieldList。请帮忙！

我正在尝试使用 Material Stepper 构建一个反应式/模型驱动的表单，但是我遇到了一个问题。我正在插入“app-telephone-picker”，这是一个使用模板驱动表单构建的单独组件。

我意识到我不能在反应/模型驱动的表单中使用 [(ngModel)]，但是当我删除它时，Material Stepper Next 按钮不会将表单移动到下一步。如果我保留 [(ngModel)]，那么 Material Stepper Next 按钮确实有效。

我有第二个表单组，此处未显示，放置在 mat-vertical-stepper 标记中。

请参考下图。首先nb-option，我从不同的数组中获取值。其次nb-option，我从方法中定义的数组中获取值 getProdDetails()。当我单击 2nd 的选项值时，nb-option它会将所有选择选项的值替换为选定的选项。

我希望它会有所帮助！另外，如果我不使用 [(ngModel)] 它工作正常。但我需要使用它来绑定值并在我的 .ts 文件中使用它。每次选择一个选项时，我都想在选择框中显示所选项目。

我想我会为这个项目实现一个路由保护，因为没有后端，它可能需要它，因为用户可能不知道数据会被重置。所以我按照这个网站提供的例子在这里，我似乎无法让它与我的项目一起工作。我不确定我忘了做什么。

我认为主要问题出在这个文件中：app.routing-module.ts

我在组件中导入了我需要的所有东西，这些组件有一个表单并有一个重定向到不同页面的按钮。

我也收到了一个错误

So in my project I display user information in a table. I have a dropdown list and a button to filter the data. I am also able to edit a row of table data and I alert the user whenever they are already editing a user to prevent them from editing more than one user at a time. I get a problem when I first launch the web app what happens is the following:

• I enter and submit user data
• I start editing one user
• Then I click on another user
• The alert pops up telling me to finish editing the first user
• I cancel editing
• I try to filter the data
• Nothing happens
• I try to clear the filter
• Nothing happens

It looks like the problem might have to do with how I have the alerts set up. I want to display the first and last name of the user that is being edited. So what I do is I have a global variable that represents the index of the user being edited and I assign it in the method where I start editing.

This is how I find the index of the user that is being edited

displayUsers is my filtered array and displayForm.users is the original data. editUserIndex is the index of the user that is being edited. I try to use that line of code to match the two ids of the two arrays.

And this is where I assign editUserIndex its value

What am I doing wrong?

如果我打开表单并更改输入字段“城市”并单击取消。之后，如果我再次打开表单，默认值会更改。如何在表单字段中获取该默认值？

零件

模板

就像标题所说的那样，如果我将输入包装在我的自定义组件中，Angular 的模板表单就不会接收到它。这是堆栈闪电战

这是来自 StackBlitz 的一些代码

app.component.html

自定义文本框.component.html

自定义文本框.component.ts

我希望在输出中同时看到wrappedInput和noWrapper属性myForm.value，但只会noWrapper被拾取。

我正在尝试制作这样的表格；

此表单的值与我的 ts 文件中的模型相关联，我像这样初始化该模型；

最初我必须检查一个 api 以查看以前是否存储过表单，如果是，那么我必须显示以前存储的表单。为此，我将收到的对象复制到 this.data 中，并且表单会加载正确的值。如果没有值，那么我必须显示默认值，这就是我将数据存储到 defaultObj 的原因。

如果有保存的值，这会在页面加载时向我显示正确的数据。问题是当用户取消编辑时，表单应重置为现有的FormValuesFromApi。

我试图这样做；

但这也会在浏览器中引发错误，提示我必须为 value1 提供一个值。这是如何运作的？如何正确加载初始值？为什么我的数据对象的更改也会反映到我现有的FormValuesFromApi 对象？

编辑：如果不使用任何方法、assign()、create() 或使用扩展运算符，则无法复制嵌套对象；因为我在我的数据对象中只使用了嵌套对象，所以对数据所做的更改也会反映在我的所有嵌套对象中。如此处所见。

在使用两种不同的方法验证相同的无线电输入元素时，即。模板驱动表单和模型驱动表单，我被这样的场景ngModel困住formControlName了3 个单独的实例。

从上面的代码片段来看，我对两种表单都使用了相同的 HTML 结构，但实例数量有所不同。这里的问题是，当验证发生时，对于模板驱动的表单，我只收到一次错误消息（这是预期的情况），但对于模型驱动的表单，我收到错误消息显示 3 次！

我的问题是：

1. 为什么为相同的元素类型生成的实例数量与ngModel和不同formControlName？
2. 需要进行哪些更改才能formControlName返回单个实例？

工作Stackbliz版本