[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 ...
随机推荐
- cmd命令 chcp
chcp是“change code page”的缩写.(关于代码页的相关知识详见:http://www.cnblogs.com/minisculestep/articles/4920992.html)
- SynchronousQueue
SynchronousQueue是一个没有数据缓冲的BlockingQueue,生产者线程对其的插入操作put必须等待消费者的移除操作take,反过来也一样. 不像ArrayBlockingQueue ...
- 前端面试题(JS篇)
原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/ 好吧,最近打算换工作,所以关注比较多的是面试题, ...
- Android 订阅-发布者模式-详解
1.概念简述 Android 简称观察者模式, GoF说道:Observer模式的意图是“定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新”. 有 ...
- Maven异常: No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK解决(能力工场小马哥)
问题描述: No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JD ...
- SCAU 13校赛 17115 ooxx numbers
17115 ooxx numbers 时间限制:1000MS 内存限制:65535K 题型: 编程题 语言: 无限制 Description a number A called oo numbe ...
- RAD XE10 Seattle
RAD Studio 10 Seattle RAD XE10 Seattle RAD 10 Seattle c++builder 10 Seattle Delphi 10 Seattle http:/ ...
- LC串联谐振回路
- oracle存储过程返回数据集结果
MSSQL的存储过程返回数据集好简单,直接SELECT 就可以. ORACLE的存储过程返回数据集必须通过游标. 创建ORACLE存储过程 create or replace procedure cx ...
- Educational Codeforces Round 5 E. Sum of Remainders (思维题)
题目链接:http://codeforces.com/problemset/problem/616/E 题意很简单就不说了. 因为n % x = n - n / x * x 所以答案就等于 n * m ...