利用“@angular/forms" 创建<form>表单的时候,系统默认会创建一个”FormGroup"的对象。

使用带有“ngModel"的”<input>“标签时,系统会自动为这个标签创建一个叫做”FormControl"的对象,并且会自动把它添加到”FormGroup"中。而“FormControl"在”FomGroup“中是用"<input>"标签上的”name"属性来做标识的。

例如下面这个例子:

<form #f="ngForm">
<input type="text" [(ngModel)]="firstFieldVariable" name="firstField">
<span>{{ f.controls['firstField']?.value }}</span>
</form>

如果没有使用“name”这个属性,那系统就会报错:

<form #f="ngForm">
<input type="text" [(ngModel)]="firstFieldVariable">
</form>
Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

解决方法除了把“name”属性添加上外,还有第二种选择,就是给"<input>"标签设置一个

ngModelOptions

属性:

[ngModelOptions]="{standalone: true}"

当设置了这个属性,<input>的 FormControl 对象就不会添加到FormGroup内,也就不能通过

{{ f.controls['firstField']?.value }} 索引到该对象的值了。

参考: https://github.com/angular/angular/issues/9230#issuecomment-228116474

Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】的更多相关文章

  1. Angular 学习笔记——自定义标签

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  2. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  3. SpringMVC:学习笔记(8)——文件上传

    SpringMVC--文件上传 说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. ...

  4. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  5. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  6. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  7. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  8. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  9. Django:学习笔记(8)——文件上传

    Django:学习笔记(8)——文件上传 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不 ...

随机推荐

  1. hdu 5269 ZYB loves Xor I 分治 || Trie

    题目大意: 长度为\(n\)的数组A.求对于所有数对\((i,j)(i \in [1,n],j \in [1,n])\),\(lowbit(A_i xor A_j)\)之和.答案对998244353取 ...

  2. DataGrid 支持字符截断显示

    DataGrid支持截断时, 需要分2部分, DataGridColumnHeader和DataGridCell. 1)创建上述2部分的ControlTemplate . 2)把其中的ContentP ...

  3. 【转】 Pro Android学习笔记(六三):Preferences(7):代码控制首选项

    [-] 代码实现preference 利用preference保存状态 DialogPreference 代码实现preference View可以不通过xml进行设置,有代码直接进行设置,首选项pr ...

  4. 输出缓存与CachePanel

    缓存的级别 缓存的作用自不必说,提高系统性能最重要的手段之一.上至应用框架,下至文件系统乃至CPU,计算机中各部分设计都能见到缓存的身影.许多朋友一直在追求如何提高Web应用程序的性能,其实最容易被理 ...

  5. 问题:C# List;结果:C#中数组、ArrayList和List三者的区别

    C#中数组.ArrayList和List三者的区别 分类: [C#那些事] 2013-03-11 00:03 36533人阅读 评论(23) 收藏 举报 目录(?)[+] 在C#中数组,ArrayLi ...

  6. linux日常管理-rsync常用选项详解

    -av 同步目录 写法 123/   /tmp/333/ 意思是把123下的文件同步到/tmp/333/下  结尾不加/ 只同步目录 两个目录一样的. //////////////////////// ...

  7. javascript如何判断手机是什么系统

    做H5页面的时候,经常会用到判断手机是什么系统,根据系统的型号,实现不同的效果,那么如何判断显示页面的手机型号呢? (function(){ var isMobile={ Android:functi ...

  8. 韩顺平循序渐进学JAVA从入门到精通 视频全套,需要的联系我

    0讲-开山篇.avi 10讲-访问修饰符.重载.覆盖.avi 11讲-约瑟夫问题.avi 12讲-多态.avi 13讲-抽象类.接口.avi 14讲-final.作业评讲.avi 15讲-作业.测试题 ...

  9. ansible应用案例-一键安装flask

    一.添加主机 sudo vim /etc/ansible/hosts ------------------------------------------------------> [group ...

  10. 杭电acm 1034题

    Problem Description A number of students sit in a circle facing their teacher in the center. Each st ...