[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, ...
随机推荐
- Epic - Coin Change
Something cost $10.25 and the customer pays with a $20 bill, the program will print out the most eff ...
- 星星字体 ps教程
本教程主要使用Photoshop制作绚丽星空装饰的艺术字教程,这个教程很简单,只需要一些简单技巧,即可做出海报.书籍杂志的封面效果.其中的字体.笔刷和背景均可以更换 教程所需要的素材链接:http:/ ...
- ShellExecute的各种用法
一.利用系统默认的邮件收发器发送电子邮件 Uses ..., ShellAPI; Var lpHwnd: HWND; lpOperation, lpFile, lpParameters, lpDire ...
- c++ struct 使用
typedef与结构结合使用 typedef struct tagMyStruct{ int iNum; long lLength;} MyStruct; 这语句实际上完成两个操作: 1) 定义一 ...
- [POJ] #1005# I Think I Need a Houseboat : 浮点数运算
一. 题目 I Think I Need a Houseboat Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 97512 ...
- BOX2D测试
; ; Box2DTestLayer = cc.Layer.extend({ world:null, //GLESDebugDraw *m_debugDraw; ctor:function () { ...
- 【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 ...
- ipmotool
ipmitool 命令收集 ipmitool 命令收集 from:http://blog.chinaunix.net/u2/70049/showart_1850139.html IPMI远程管理实验 ...
- Extjs4.2纯前台导出Excel总结
前段时间做了两个项目,用到了Extjs4.2纯前台导出Excel,遇到很多的问题,从网上也找了很多资料,在这里总结一下,做一个记录: 使用方法: 1.下载extexcel文件包,这里可以下载http: ...
- Cisco SDM
SDM连接方式:http+telnet / https+ssh 要使用SDM对CISCO设备实现集中式管理,必须在设备上键入如下命令: 步骤1: 要启用路由器的HTTP/HTTPS 服务器,请 ...