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. Vs2015 win10虚拟机启动问题:无法设置UDP端口 解决方法 合集(转载)

    刚装的vs2015 社区版 出现这个问题,wp8.1和win10m模拟器都无法启动,找了好久找到的解决方案,放这儿供大家参考,免得大家像我一样走弯路: Windows Phone emulator n ...

  2. 从高铁G18中高端如厕看12306的验证码

    1.引子 最近疯狂的吐槽12306网站的虐心验证码. 从对铁老大的一贯作风来说,这个事不过是芝麻绿豆的事情.这个事件只是因为发生在网络上,而引起了广大网民的一致谴责而已. 相信更丰富的如厕经历,大家只 ...

  3. Python超级程序员使用的开发工具

    我以个人的身份采访了几个顶尖的Python程序员,问了他们以下5个简单的问题: 当前你的主要开发任务是什么? 你在项目中使用的电脑是怎样的? 你使用什么IDE开发? 你将来的计划是什么? 有什么给Py ...

  4. mybatis系列-15-查询缓存

    15.1     什么是查询缓存 mybatis提供查询缓存,用于减轻数据压力,提高数据库性能. mybaits提供一级缓存,和二级缓存. 一级缓存是SqlSession级别的缓存.在操作数据库时需要 ...

  5. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  6. DCPcrypt

    delphi dcp component TDCP_md5 md5 String; md5 stream;流文件 procedure TForm1.Button1Click(Sender: TObje ...

  7. MYSQL数据库性能调优之四:解决慢查询--索引

    为什么索引能够提高查询速度?没有索引 检索数据的方式是从头到尾一条一条挨着匹配,这是慢的根本原因:索引类型BTREE:二叉树类型,原理图如下:对表创建一个二叉树,记录中间数据的物理磁盘地址,二叉树检索 ...

  8. c#读properties文件

    @(编程) properties文件 MONGO_URL = mongodb://172.16.20.3/srtc_dc CURRENT_VERSION = 2.0 IS_AUTO_UPDATE = ...

  9. ESP8266调试问题

    1 串口连接电脑调试时,GPIO15必须接地,否则没响应 2发送退出透传指令“+++”时,必须取消勾选发送新行.发送别的指令时须勾选. 另外若所刷固件版本为[Vendor:www.ai-thinker ...

  10. C#下实现的半角转与全角的互转

    全角和半角的互转在C#下怎么实现呢? /// 转全角的函数(SBC case) /// ///任意字符串 ///全角字符串 /// ///全角空格为12288,半角空格为32 ///其他字符半角(33 ...