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. 【树莓派2B倒腾日志】之安装系统及配置

    15号树莓派到手到现在,折腾了也有一小周,自己摸索着,装了系统,登上SSH,更新了源,连了VNC,换上wifi,亮了小灯.再到今天捣鼓了下数码管,回头想想,该写个日志记录一下这一周的所得,自己总结也方 ...

  2. PHPSTORM 与 Xdebug 配合调试

    基本的配置可以参考网上的文档, 浏览器中装插件(xdebug)或直接在请求中加上如下的参数也可启动调试 ?XDEBUG_SESSION_START=PHPSTORM

  3. 基本的SQL Server 语句,包含 增、删、改、查 程序员必会

    这是我以前学习时, 整理的一套基础SQL Server增.删.改.查 等语句 ,初学者可以从上往下学完. 也方便自己忘记时翻看! create database SQLschool go --批 go ...

  4. Arduino+RFID RC522 +继电器

    博客园的第一篇博文就献给Arduino了.不知道能不能坚持自己喜欢的并且记录下来. 起码是个好的开始. 想实现一卡通代替钥匙开启电动车. 简单的原理,通过RC522模块读取一卡通的序列号,在程序中进行 ...

  5. HDU-3874 Necklace 线段树+离线

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3874 比较简单的题,题意也好懂. 先O(n)求每个数左边第一次出现的与他相同的数的位置l[i].对询问 ...

  6. URAL-1997 Those are not the droids you're looking for 二分匹配

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1997 题意:记录了n个人进出门的时间点,每个人在房子里面待的时间要么小于等于a,要么大于 ...

  7. SharePoint咨询师之路:备份和恢复系列三 - 备份web和服务应用程序

    本系列包括: 备份服务器场和配置 备份web和服务应用程序 备份内容数据库 备份网站集 备份自定义项 备份web应用程序和服务应用程序一样有三种方式:SharePoint管理中心网站.Windows  ...

  8. 删除Ngnix 日志

    删除Ngnix日志的脚本 #!/bin/bash #初始化 LOGS_PATH=$(pwd)/logs YESTERDAY=$(date -d "yesterday" +%Y-%m ...

  9. POJ 3347 Kadj Squares

    Kadj Squares Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 2132   Accepted: 843 Descr ...

  10. Struts2数据校验方法

    方法: 1.在Action类中execute()方法中进行校验. 优点:Action类无需继承框架中的类. 缺点:(1)当有多个校验时,代码重复,违反高内聚,低耦合. 2.重写框架ActionSupp ...