[Angular2 Form] Create and Submit an Angular 2 Form using ngForm
Forms in Angular 2 are essentially wrappers around input
s 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 ...
随机推荐
- Monitor traffic to localhost from IE or .NET
原文:http://docs.telerik.com/fiddler/Configure-Fiddler/Tasks/MonitorLocalTraffic Monitor traffic to lo ...
- AI教程
AI制作铅笔图案笔刷 在下面的步骤中,我们将学习如何在Adobe Illustrator中创建铅笔笔刷.首先你要建立一个简单的网格,以及如何使用基本的工具和形状创建主要的形状.然后,学习如何保 ...
- Slideout吐槽
前言: 今天有点事,只尝试做一个侧边栏.SlideOut一个侧边栏,对着github,ReadMe看,并尝试着写了.还不错,关键是当与bootstrap一起时,什么效果都没了, 这是什么情况,明天想再 ...
- ninject学习笔记一:IOC的实现
这篇文章主要介绍ninject在IOC方面的实现,至于IOC的含义,网络资源很丰富,我这儿就不再赘述了.官方的文档其实挺好的,只是本人英语很烂,看起来比较费劲,下面这些东西是看官方的代码推敲的,我觉得 ...
- PostgreSQL的 fdw 跨库使用
create extension postgres_fdw; ',dbname 'postgres'); create user mapping for android_market server s ...
- Hadoop 中疑问解析
Hadoop 中疑问解析 FAQ问题剖析 一.HDFS 文件备份与数据安全性分析1 HDFS 原理分析1.1 Hdfs master/slave模型 hdfs采用的是master/slave模型,一个 ...
- 【Excel】Retrieving the COM class factory for component with CLSID {00024500-0000-0000-C000-000000000046}:
[Excel]Retrieving the COM class factory for component with CLSID {00024500-0000-0000-C000-0000000000 ...
- Chocolatey的安装与使用
@(编程) 前言 在 Linux 下,大家喜欢用 apt-get 来安装应用程序,如今在 windows 下,大家可以使用 Chocolatey 来快速下载搭建一个开发环境. Chocolatey 的 ...
- JUnit 4 如何正确测试异常
本篇讲述如何在 JUnit 4 下正确测试异常,我会从 try..catch 的方式谈起,然后说到 @Test(expected=Exception.class), 最后论及 @Rules publi ...
- oracle学习 十一 包+复合类型+自定义异常(持续更新)
在这里讲一下包的概念, 二话不说上个例子 包头: create or replace package pck_test is procedure proc_report_salary(name nva ...