问题标签 [angular-template-form]

我正在研究 Angular 10。我在 Angular 模板驱动和反应式表单方面遇到问题已经 3 天了。

我想做的事：创建一个包含许多子组件的复杂表单（以便分离大量代码）。然后单击一个按钮，我想验证所有表单和子组件。我想以某种方式验证子组件。

我创建的内容：具有 2 向绑定的模板驱动表单，因为我相信它更容易并且不需要我的情况。

我设法使验证仅适用于基本表单。我无法在子组件上做到这一点。我看到很多关于这个问题的帖子并尝试了很多，但我很困惑。

我的代码：

mainForm.html

子组件.html：

childrencomponent.ts：

父.ts

}

代码按原样工作。问题是当我按下注册时，子组件中的任何内容都不会得到验证。（在这种情况下是宠物名称和性别）

演示图片：表格

我的问题：

1. 我需要使用模板驱动或反应式表单吗？我之前说过，模板驱动的表单更容易，我的情况不需要，但是我不太确定这一点。

2. 我需要将表格传递给孩子还是将孩子传递给主表格？有没有办法使用模板驱动表单对子组件进行验证？

请有人能告诉我什么是正确的做法，给我一些反馈和任何建议。不要犹豫，问我任何事情，或者如果你想了解更多细节。

感谢您的时间。

As i'm trying to use the template driven approach in angular 10 ionic to access the model which gives error on page load.

Now as i have used this approach in the HTML page as.

What am i missing here .. ?

Update 1:
It states here as well https://codecraft.tv/courses/angular/forms/template-driven/

大家好？如果有值，我如何验证#permissionInput，顺便说一句，这是有角度的。

我在我的 Angular 10 应用程序中有一个模板驱动的表单，我正在尝试监听更改，以便我可以向用户显示“已更改，请提交更新”消息。

HTML

机会.component.ts

但它得到一个错误：

因为 ngForm 没有初始化。这是一个类似的问题：如何监听角度模板驱动的表单更改，在https://ng-run.com/edit/CGoUiw88N7OmI7x0YmHJ有一个运行的答案，它有同样的问题。

在我听取更改之前，如何获取表单并确保它存在？我正在使用 Angular 10.2.0

不确定这是否会有所不同，但整个页面都包含在

这是在 ngOnInit 中的 api 调用之后设置的

输出 true（对于已加载）和 undefined（对于 this.ngForm）。

更新*

所以看起来确实是因为我只有在数据返回后才加载整个表单。因为它不在页面上，所以 @ViewChild 可以连接到它。我把我的 *ngIf 放在表单内的一个 div 上，它工作正常

我使用模板驱动输入，与响应式输入不同，在单元测试中无法获得其值。

这里有两个相同的组件，一个使用模板驱动方法实现，另一个使用响应式表单。

为了验证每个组件，这里还有两个测试。

为什么只有一个通过？

我以以下方式使用 mat 错误

即使errorMessage中有文本，mat错误也没有显示，_control.control被引用到formControl 我什至打印了formControl.errors

我得到了错误对象，并且在 changeMethod 中我正在使表单被触摸

没有显示错误可能是什么原因即使显示了formcontrol值

我已经阅读了很多关于角度中两种形式的差异的文章，但没有找到实际的例子。那么，如果我有一个表格，并且只有一个复选框来选择行，那么是否有充分的理由使用反应形式？我找不到任何不使用模板驱动方法的理由。

选择带有复选框的表格中的行...模板还是反应式？

在此表上方搜索输入...模板或反应式？

（无验证）

我有以下角度模板形式：

问题是所选选项未显示在我的页面上。

我尝试不同的浏览器，所选选项显示在 safari 中，但不在 chrome et firefox 中。不知道是不是浏览器的问题。

你能帮我吗？

我正在尝试在我的网站内创建一个论坛。在努力使用模板驱动的表单来实现之后，我决定切换到响应式表单。我在整个站点中一直在这两种方法之间切换，并意识到反应式表单有一个缺点，导致我选择模板驱动的表单，我怀疑有一种解决方法值得弄清楚。我遇到的问题是，当用户想要编辑他们已经创建的内容时，我使用与创建相同的表单，但将文档 ID 附加到路由中，如下所示：

localhost:4200/create-thread/some-thread-uid

当遵循这条路线时，它会加载 create-thread 组件，但会将已经提供的数据预加载到适当的表单控件中。这是通过使用双向绑定将线程对象附加到相关表单的 ngModel 来完成的。像这样：

我的问题是，有没有办法使用响应式表单来实现这一点（将已经提供的信息从存储在云数据库中的对象加载到输入字段中进行编辑）？我尝试了几种方法但无法弄清楚，包括将“thread.author”注入表单构建器中的适当字段。任何帮助表示赞赏。

Angular 9 形式的两种方式绑定我尝试在表单中使用 [(ngmodel)] 但它给出错误这在 Angular 6 及更高版本中被贬低