Forms in Angular 2 are essentially wrappers around inputs that group the input values together into an object and also check that all the inputs are valid. Angular 2 ‘sngForm allows you to get a reference to that object and validity and use them to display information about the form or use the ngSubmit event to save information from the form.

Make sure you need to add 'name' prop to both form and input fields. This helps to structure the form model.

  <form action="" name="myForm" #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
Firstname: <input type="text" name="firstName"ngModel required>
<button [disabled]="!formRef.valid">Submit</button>
</form>
<pre>
form value: {{formRef.value | json}}
form valid: {{formRef.valid | json}}
</pre>

ngModel is reuqire by ngForm, so you need to use ngModel on input field even you don't assign anything to it.

[Angular2 Form] Create and Submit an Angular 2 Form using ngForm的更多相关文章

  1. [Angular2 Form] Create Radio Buttons for Angular 2 Forms

    Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels ...

  2. angular reactive form

    这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-uploa ...

  3. angular实现form验证

    先上效果页面:https://lpdong.github.io/myForm-1/ 其中几个知识点 1.angularJs提供了几个新的type类型: type="password" ...

  4. asp.net中通过form表单submit提交到后台的实例

    前台<body>中的代码: <body> <div id="top"> </div> <form id="login ...

  5. form表单submit事件

    form表单submit事件同时会触发form表单中button按钮的click事件 <!DOCTYPE html> <html> <head> <meta ...

  6. SPRING IN ACTION 第4版笔记-第六章RENDERING WEB VIEWS-002- Spring的JSP标签之form标签(<sf:input><sf:errors><sf:form>)

    一. Spring offers two JSP tag libraries to help define the view of your Spring MVC web views. One tag ...

  7. Django form表单功能的引用(注册,复写form.clean方法 增加 验证密码功能)

    1. 在app下 新建 forms.py 定义表单内容,类型models from django import forms class RegisterForm(forms.Form): userna ...

  8. Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合

    Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合 一丶FORM的介绍 1.生成页面可用的HTML标签 2.对用户提交的 ...

  9. [Angular2 Form] Build Select Dropdowns for Angular 2 Forms

    Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop throug ...

随机推荐

  1. Android应用解决65K方法数限制

    近日,Android Developers在Google+上宣布了新的Multidex支持库,为方法总数超过65K的Android应用提供了官方支持. 如果你是一名幸运的Android应用开发者,正在 ...

  2. MFC学习20160718(GetModuleFileName&amp;&amp;GetAppDataPath)

    1.标题栏设置 一.对话框标题栏内容为静态 直接在对话框属性“General”的“Caption”中修改. 二.对话框标题栏内容为动态生成的 在对应对话框的初始化函数OnInitDialog()中添加 ...

  3. ps制作哈7海报字体

    模仿也需要较强的功底和分析思路.如下面的教程,作者模仿的是电影海报字.文字构造虽不复杂,不过思路不对的话就容易走弯路.最终效果 1.先来分析文字的构造,大致由两部分组成,一部分是浮雕字,另一部分是质感 ...

  4. BITED-Windows8应用开发学习札记之二:Win8应用常用视图设计

    感觉自我表述能力有欠缺,技术也不够硬,所以之后的Windows8应用开发学习札记的文章就偏向于一些我认为较难的地方和重点了多有抱歉. 上节课是入门,这节课就已经开始进行视图设计了. Windows应用 ...

  5. Mapreduce执行过程分析(基于Hadoop2.4)——(二)

    4.3 Map类 创建Map类和map函数,map函数是org.apache.hadoop.mapreduce.Mapper类中的定义的,当处理每一个键值对的时候,都要调用一次map方法,用户需要覆写 ...

  6. WPF 简介

    简介 一.   WPF产生的背景 因为人们的生活水平不断提前,审美观也随着提升,而软件的应用发展水平目前无法赶上大家的审美观和使用要求:比如:像电影中的软件能够方便的使用,而且有动态的效果同时附加形象 ...

  7. 第三百五十九天 how can I 坚持

    在家待了一天,鼓捣了下linux,总算能连上网了,懂得还是少啊. 晚上去华北电力大学跑了会步,十圈,还挺有成就感呢,就是没带手环,哎. 以后学习一定要记笔记,上了这么多年学,都 没学会怎么记笔记,也是 ...

  8. TPARAMS和OLEVARIANT相互转换

    所谓的“真3层”有时候是需要客户端上传数据集的TPARAMS到中间件的. 现在,高版本的DATASNAP的远程方法其实也是直接可以传输TPARAMS类型的变量,但是DELPHI7(七爷).六爷它们是不 ...

  9. 【Linux笔记】Linux目录结构

    [Linux笔记]Linux目录结构   本文内容整理自网络,以作参考. /:根目录,位于linux文件系统目录结构的顶层,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib ...

  10. [置顶] 我的设计模式学习笔记------>Java设计模式总概况

    设计模式的概念最早起源于建筑设计大师Alexander的<建筑的永恒方法>一书,尽管Alexander的著作是针对建筑领域的,但是他的观点实际上用用于所有的工程设计领域,其中也包括软件设计 ...