[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, ...
随机推荐
- javascript --- 面向对象 --- 封装
javascript中有原型对象和实例对象 如有疑问请参考:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_enca ...
- 安装linux操作系统--浪潮服务器
一直都是在虚拟机上进行安装linux操作系统,在服务器上安装的很少,也没有碰到过没找到驱动的情况,例如什么raid卡驱动,网卡驱动等异常情况的发生. 这次安装了两台服务器,浪潮的提供的服务器,硬盘是两 ...
- “内部类” 大总结(Java)
(本文整理自很久以前收集的资料(我只是做了排版修改),作者小明,链接地址没有找到,总之感谢,小明) (后面也对"静态内部类"专门做了补充) 内部类的位置: 内部类可以作用在方法里以 ...
- Eclipse使用技巧总结
Eclipse设置工作空间的字符编码: 打开eclipse开发界面,依次点击Window->Preferences->General->Workspace 修改Text file e ...
- Hadoop2的简单安装
前面花了很多时间来介绍hadoop1的安装,随着hadoop的发展,hadoop2的应用也越来越普及,hadoop2解决了hadoop1中的很多问题,比如单点故障,namenode容量小的问题. 我们 ...
- freetds链接错误
用tsql连接mssql出现下面的错误 tsql -H 192.168.1.100 -p 1433 -U sa Password: sa locale is "en_US.UTF-8&quo ...
- always NetWork Performance measure Tools
1,iperf key feature:Measuring TCP and UDP BandWidth Performance Iperf features; *TCP .Measure bandwi ...
- 如果Apache Spark集群中没有分布式系统,则会?
若当连接到Spark的master之后,若集群中没有分布式文件系统,Spark会在集群中每一台机器上加载数据,所以要确保Spark集群中每个节点上都有完整数据. 通常可以选择把数据放到HDFS.S3或 ...
- 为什么在Spring的配置里,最好不要配置xsd文件的版本号
为什么dubbo启动没有问题? 原文链接:http://www.tuicool.com/articles/YRn67zM 这篇blog源于一个疑问: 我们公司使了阿里的dubbo,但是阿里的开源网站h ...
- Options for Debugging Your Program or GCC
[Options for Debugging Your Program or GCC] -g Produce debugging information in the operating system ...