[Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup
The ngModelGroup
directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predictable way. ngModelGroup
is often used in combination with fieldset
as they mostly represent the same idea of “grouping together inputs.”
<form name="myForm2" #formRef2="ngForm" (ngSubmit)="onSubmit(formRef2.value)">
<fieldset ngModelGroup="login">
<legend>Login:</legend> Username: <input type="text" name="username" ngModel required>
Password: <input type="password" name="password" ngModel requried> </fieldset>
</form>
<pre>
form value: {{formRef2.value | json}}
form valid: {{formRef2.valid | json}}
</pre>
[Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup的更多相关文章
- [Angular2 Form] Style Validation in Angular 2 Forms
Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each ...
- [Angular2 Form] Use RxJS Streams with Angular 2 Forms
Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of t ...
- [Angular2 Form] Angular 2 Template Driven Form Custom Validator
In this tutorial we are going to learn how we can also implement custom form field validation in Ang ...
- [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 ...
- [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 ...
- [Angular2 Form] Understand the Angular 2 States of Inputs: Pristine and Untouched
Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the inp ...
- [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 ...
- [Angular2 Form] Display Validation and Error Messaging in Angular 2
Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access ...
- [Angular2 Form] Create custom form component using Control Value Accessor
//switch-control component import { Component } from '@angular/core'; import { ControlValueAccessor, ...
随机推荐
- C语言的 (强制类型转换) 以及 '字符字面值'
C语言的显式/隐式类型转换,都有一个中间变量的存在,原数据的类型.内容都不变. 以下代码,都用GCC编译. #include<stdio.h> int main() { char c = ...
- 跨平台音乐播放器qmmp(Cross-Platform Audio Player Qmmp)
开源多媒体播放器(Audio-Player),简洁的界面,最看重它的是跨平台的特性. 开源 跨平台(Linux.Windows) 简洁 支持音乐格式(mp3/ogg......) 全局快捷键 播放中打 ...
- AsyncTask简单获取网络图片的例子
//首先呢,添加网络权限 android.permission.INTERNET //然后,布局View img=(Image)findViewById(R.id.imageView1); btn=( ...
- bzoj 2190 [SDOI2008]仪仗队(欧拉函数)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2190 [题意] n*n的正方形,在(0,0)格点可以看到的格子数目. [思路] 预处理 ...
- 跨站脚本攻击(Cross‐Site Scripting (XSS))实践
作者发现博客园在首页显示摘要时未做html标签的过滤,致使摘要中的html代码可以被执行,从而可以注入任何想要被执行的js代码,作者利用这一缺陷在本文摘要中插入了一段js代码执行alert弹窗,同时增 ...
- signal()函数
转自:http://blog.csdn.net/sddzycnqjn/article/details/7285760 1. 信号概念 信号是进程在运行过程中,由自身产生或由进程外部发过来的消息(事件) ...
- bundle install rake-10.4.2
这个是由于被墙了的原因,提供一个不用FQ解决的方法 淘宝做了一个gem镜像,地址是http://ruby.taobao.org/ 为什么有这个? 由于国内网络原因(你懂的),导致 rubygems. ...
- Hadoop2学习记录(1) |HA完全分布式集群搭建
准备 系统:CentOS 6或者RedHat 6(这里用的是64位操作) 软件:JDK 1.7.hadoop-2.3.0.native64位包(可以再csdn上下载,这里不提供了) 部署规划 192. ...
- 北信源VRVEIS网管软件测试
650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/att ...
- 【转】 ASP.NET网站路径中~(波浪线)解释
刚开始学习ASP.NET的朋友可能会不理解路径中的-符代表什么,例如ImageUrl=”~/Images/SampleImage.jpg” 现在我们看看-代表什么意思.-是ASP.NET 的Web 应 ...