[Angular2 Form] Create and Submit an Angular 2 Form using ngForm
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的更多相关文章
- [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 ...
- angular reactive form
这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-uploa ...
- angular实现form验证
先上效果页面:https://lpdong.github.io/myForm-1/ 其中几个知识点 1.angularJs提供了几个新的type类型: type="password" ...
- asp.net中通过form表单submit提交到后台的实例
前台<body>中的代码: <body> <div id="top"> </div> <form id="login ...
- form表单submit事件
form表单submit事件同时会触发form表单中button按钮的click事件 <!DOCTYPE html> <html> <head> <meta ...
- 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 ...
- Django form表单功能的引用(注册,复写form.clean方法 增加 验证密码功能)
1. 在app下 新建 forms.py 定义表单内容,类型models from django import forms class RegisterForm(forms.Form): userna ...
- Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合
Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合 一丶FORM的介绍 1.生成页面可用的HTML标签 2.对用户提交的 ...
- [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 ...
随机推荐
- 八皇后问题 --- 递归解法 --- java代码
八皇后问题是一个以国际象棋为背景的问题:如何能够在 8×8 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或斜线上.八皇后 ...
- Python的pep8(代码规范)
Python的pep8-代码规范 1. 代码布局设计 1.1 缩进 A. 使用四个空格来进行缩进 B. 换行的时候可以使用反斜杠,最好的方法是使用园括号,在使用反斜杠的时候,在反斜 ...
- 黑马程序员——有关protocol的小结
在OC程序中经常会有这样的问题就是一个类想让其他类帮自己实现某些方法,然后再将结果返回给这个类:如何让一个类要找的代理去实现自己想要的方法呢? 这样就需要有一个协议,让能遵守协议的其他类都能实现协议中 ...
- XAML概览 1(译自JeremyBytes.com)
(文章译自JeremyBytes.com,由于原文太长,故分成几篇,能力所限,如有疏漏,希望海涵.另外若有侵权,务必尽快告知) Overview 了解XAML (可扩展应用程序标记语言)是使用WPF和 ...
- 怎么从sqlserver 数据库导出 insert 的数据语句
In SSMS in the Object Explorer, right click on the database right-click and pick "Tasks" a ...
- [cocos2d-js]按钮整合成大图后打APK后不显示
网页版本都能正常显示碎图和整合成大图的 手机版本不正常 var btnKick = cc.MenuItemImage.create( "#btn_kick.png", " ...
- js运动 分享到
<!doctype html> <html> <head> <meta charset = "utf-8"> <title&g ...
- Linux下Python获取IP地址
<lnmp一键安装包>中需要获取ip地址,有2种情况:如果服务器只有私网地址没有公网地址,这个时候获取的IP(即私网地址)不能用来判断服务器的位置,于是取其网关地址用来判断服务器在国内还是 ...
- 服务框架Dubbo(转)
add by zhj:该开源项目已经停止更新了,不过倒是可以学学该软件的架构设计 原文:http://www.oschina.net/p/dubbo Dubbo 是阿里巴巴公司开源的一个高性能优秀的服 ...
- Hibernate资源
正在学马士兵Hibernate的同学来看这里,这里提供了他视频里需要的JAR包,请尽情下载,给好评喔. 一.Hibernate 3.3.2 核心JAR包 http://pan.baidu.com/s/ ...