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. iOS学习笔记之回调(二)

    写在前面 上一篇学习笔记中简单介绍了通过目标-动作对实现回调操作:创建两个对象timer和logger,将logger设置为timer的目标,timer定时调用logger的sayOuch函数.在这个 ...

  2. 使用JavaMail API发送邮件

    发送邮件是很常用的功能,注册验证,找回密码,到货通知,欠费提醒等,都可以通过邮件来提醒. Java中发送邮件需要使用javax.mail.jar包,读者可以上网搜索或去官方下载,下载地址为: 下面贴上 ...

  3. flex之组件简单应用

    1. 将父窗体的内容传递给子窗体: 2.将子窗体内容传递给父窗体:即用户名和密码,t1是父窗体文本框id.

  4. 数据结构 -- 图的最短路径 Java版

    作者版权所有,转载请注明出处,多谢.http://www.cnblogs.com/Henvealf/p/5574455.html 上一篇介绍了有关图的表示和遍历实现.数据结构 -- 简单图的实现与遍历 ...

  5. Cloud_panel

    传统基础架构应用程序的系统架构师,云计算应用程序的设计确实是相当有挑战性的工作.体现在应用程序架构师首先要了解云计算环境和传统基础架构的差异并且充分利用云计算平台的一些特点来更好的满足用户需求. 对于 ...

  6. mysql 全文查找fulltext

    从 Mysql 4.0 开始就支持全文索引功能,但是 Mysql 默认的最小索引长度是 4.如果是英文默认值是比较合理的,但是中文绝大部分词都是2个字符,这就导致小于4个字的词都不能被索引,全文索引功 ...

  7. How to run a terminal inside of vim?

    [How to run a terminal inside of vim?] :sh turn vim into shell mode d+trl back to vim 参考:http://stac ...

  8. USB -- scsi命令集

    摘自:<圈圈教你玩usb> 241页 SCSI(small computer system interface)是小型计算机系统的缩写,有一套完整的协议规定其命令和命令数据的响应.scsi ...

  9. css3妙用 刷新图标

    从猫眼电影看到的一个图标 .geopos i:before { content: ""; width: .8em; height: .8em; border: .14em soli ...

  10. HDU 5927 Auxiliary Set (dfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5927 题意: 给你一棵树,其中有一些'不重要'的点,要是这些'不重要'的点的子树中有两个重要的点的LC ...