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. echo输出空行

    rem 以下方法都可以输出空行,这十种方法分为三组,每组的效率依次递减 echo= echo, echo; echo+ echo/ echo[ echo] echo: echo. echo\

  2. MySQL中批量插入数据

    不管怎么样, 你需要大量的数据, 那么问题来了, 怎么快速地插入呢? 1. 这是我创建的一个批量插入的存储过程… 当然, 你可以把参数去掉, 一次性插入1W, 10W… CREATE DEFINER= ...

  3. static用法总结

    C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. 一.面向过程设计中的st ...

  4. RHadoop教程翻译系列 _Mapreduce(1)_第一个Mapreduce任务

    如果单从概念上来说,Mapreduce和R中的函数lapply, tapply并无差别,它们都是把元素转化成列,然后计算索引(Mapreduce中的键),最后合并成一个定义好的组合.首先,让我们看一个 ...

  5. Eclipse安装插件的方式

    Eclipse有两种安装插件的方式,分为在线安装和手动安装,因为受到网络环境限制,推荐采用手动安装的方式,下面我们先来了解一下Eclipse手动安装插件的步骤. Eclipse手动安装插件: 第一种: ...

  6. vmware下ubuntu14.04调整分辨率

    很多人在vmware中安装ubuntu时,为了调整屏幕分辨率,都去下载并安装vmware-tools.其实,这是没有必要的.如果你需要vmware和宿主机实现共享,或者为了使文件能拖进拖出,再或者是需 ...

  7. 在mac上搭建python环境

    原文出处:http://blog.justbilt.com/2014/07/02/setup_python_on_mac/ 这两天重新搞了下python的环境,发现好多地方还是容易忘记,因此有了这篇文 ...

  8. python添加windows域验证

    1.安装python-ldap https://pypi.python.org/pypi/python-ldap/ 在 Ubuntu/Debian 下安装 python-ldap 模块: $ sudo ...

  9. RFID第二次作业

    1.简述智能卡的发展,以及射频电子标签在其中所处的位置. 智能卡(Smart Card)又称为集成电路卡(IC卡),内部带有微处理器和存储单元等部件. 射频电子标签是一种非接触式的IC卡,是后期发展起 ...

  10. MecAnim

    [MecAnim] MecAnim是Unity 4.0推出的新的动画系统,新系统使用Animator组件来控制动画,老系统使用Animation组件来控制动画.此篇讲述MecAnim系统. What ...