angular中的模板引用变量在from表单提交中的使用

梦想称为大佬

于 2021-07-19 16:32:35 发布

阅读量365

点赞数

CC 4.0 BY-SA版权

分类专栏： angular from

本文链接：https://blog.youkuaiyun.com/xawjz/article/details/118901076

angular 同时被 2 个专栏收录

12 篇文章

订阅专栏

from

1 篇文章

订阅专栏

本文介绍了Angular中模板引用变量的概念及其应用。通过#f='ngForm'创建对表单的引用，实现表单验证功能。当表单字段为空时，利用[disabled]属性阻止提交按钮的点击。通过示例代码展示了如何在按钮中检查表单是否有效，确保只有当表单填写完整时才能提交。同时推荐了一篇深入解释模板引用变量的文章供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在使用表单进行提交的时候，发现这个小东西，#f="ngForm" 模板引用变量。

 <form #form="ngForm" (submit)="signin()" class="form-signin">

重要的其实是#模板引用变量。这个名词我刚看到一脸懵逼。其实理解一下这个就是创建一个对元素的引用。即如果用在HTML中就可以在别处使用对这个页面元素的引用做一些事情。

我这个需求是，在表单未填入值的时候不允许点击提交按钮。

实现方式是，用#from引用表单元素的"ngForm"（这里的ngForm是创建一个顶级的FormGroup实例，并把它绑定到该表单元素上，来跟踪表单值的变化。具体去看angular官网的介绍），然后在提交按钮button使用这个引用，当表单的值为空的时候让按钮无法点击即可。

<button
       class="btn btn-lg btn-primary btn-block"
       [disabled]="!form.form.valid"
       type="submit">Sign in
     </button>

在了解模板引用变量的时候，看到一篇不错的文章，可以帮助大家理解。

→【翻译】【教程】模版引用变量的魔法（ https://www.jianshu.com/p/ad9d375bf76b ）