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. 【C#】构造函数的特点

    1.它的函数名与类名相同:2.它可以重载:3.不能指定返回类型,即使是void也不行:4.虽然在一般情况下,构造函数不被显式调用,而是在创建对象时自动被调用.但是并不是不能被显示调用.有些时候是一定要 ...

  2. (转载)OC学习篇之---Foundation框架中的NSObject对象

    前一篇文章讲到了OC中的代理模式,而且前几篇文章就介绍了OC中的类相关知识,从这篇文章开始我们开始介绍Foundation框架. OC中的Foundation框架是系统提供了,他就相当于是系统的一套a ...

  3. 50+ 响应式的Prestashop电商主题

    PrestaShop是一款针对web2.0设计的全功能.跨平台的免费开源电子商务解决方案,自08年1.0版本发布,短短两年时间,发展迅速,全球已超过四万家网店采用Prestashop进行部署.Pres ...

  4. Cloudera Manager5安装总结遇到问题及解决办法

    安装过程中,由于网络终端,导致下面问题: 问题1:安装停止在获取安装锁/tmp/scm_prepare_node.tYlmPfrT using SSH_CLIENT to get the SCM ho ...

  5. php 解压 .gz 文件

    在百度搜索到的 PharData 类和 ZipArchive 都是解压不了 .gz 的文件的,后来在 google 搜索到解决方法,问题解决. try { $phar = new PharData($ ...

  6. 第二百三十五天 how can I 坚持

    其实昨天听遗憾的,尽头看了新闻,有好多人都出去赏雪了,可惜了,最遗憾的是没有叫上你一块去. 晚上喝了点酒,抽了两根烟,以前基本不喝酒,就别提抽烟了,陈小春的<算你狠>,该如何是好. 经常在 ...

  7. Servlet 2.4 规范之第一篇:概览

          写在前面的话: 本系列是对<Java Servlet Specification Version 2.4>的完全翻译,力争但不保证完美表达出英文原文的思想内涵.如有疏漏之处,还 ...

  8. UVALive 5881 Unique Encryption Keys (DP)

    Unique Encryption Keys 题目链接: http://acm.hust.edu.cn/vjudge/problem/26633 Description http://7xjob4.c ...

  9. HDU 4602 Magic Ball Game(离线处理,树状数组,dfs)

    Magic Ball Game Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  10. sql的union用法

    sql中union是很常见的,尤其是创建视图时,完全离不开union. SQL UNION 操作符合并两个或多个 SELECT 语句的结果,UNION 内部的每个 SELECT 语句必须拥有相同数量的 ...