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. 【Python学习笔记】字符串操作

    字符串的表示 python中的字符串是一个常量,可以使用单引号'',双引号""或三引号""" """来创建一个字符串常量 ...

  2. 客户端无法tcp连接上本地虚拟机的问题(最后是linux防火墙问题)

    刚装好裸的centos6.5,很多东西跟以前比都是没有的,所以做起来会遇到很多问题. 今天刚把svn 无法ci的问题解决了,起完服后,发现客户端连不上. 1)端口转发,查看了一下虚拟机的端口转发,发现 ...

  3. LeetCode(8) - String to Integer (atoi)

    虽然是easy,却是比较繁琐的一道题,需要考虑各种边界条件.在WA了好几遍之后,才把各种边界条件给补全.需要考虑到的因素如下: 输入不合法字符,非"0-9",对于首位,合法字符还包 ...

  4. 使用VMware10虚拟机安装Linux系统(能力工场)

    作为IT从业人员,我们经常使用到Linux系统,但是实际开发过程我们通常在Windows平台操作,为了满足工作需要,这个时候我们通常在windows平台安装虚拟机,并在其上建立linux系统,这样就极 ...

  5. [转]Centos配置国内yum源

    原文地址:http://blog.chinaunix.net/uid-23683795-id-3477603.html 网易(163)yum源是国内最好的yum源之一 ,无论是速度还是软件版本,都非常 ...

  6. IOS中 什么是UITableView的索引放大镜字符

    IOS中 什么是UITableView的索引放大镜字符 [_dataSource addObject:UITableViewIndexSearch]; 版权声明:本文为博主原创文章,未经博主允许不得转 ...

  7. DataGrid参数

    1.3.2 data-options="singleSelect:true,collapsible:false,url:'/datagrid/getbasic'"    参数 类型 ...

  8. Configure the Struts Tag Libraries

    In Struts framework, you always need to configure the Struts tag libraries in order to access it in ...

  9. Codeforces 444 C. DZY Loves Colors (线段树+剪枝)

    题目链接:http://codeforces.com/contest/444/problem/C 给定一个长度为n的序列,初始时ai=i,vali=0(1≤i≤n).有两种操作: 将区间[L,R]的值 ...

  10. HDU 5458 Stability (树链剖分+并查集+set)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5458 给你n个点,m条边,q个操作,操作1是删边,操作2是问u到v之间的割边有多少条. 这题要倒着做才 ...