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>

Github

[Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup的更多相关文章

  1. [Angular2 Form] Style Validation in Angular 2 Forms

    Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each ...

  2. [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 ...

  3. [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 ...

  4. [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 ...

  5. [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 ...

  6. [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 ...

  7. [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 ...

  8. [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 ...

  9. [Angular2 Form] Create custom form component using Control Value Accessor

    //switch-control component import { Component } from '@angular/core'; import { ControlValueAccessor, ...

随机推荐

  1. Epic - Coin Change

    Something cost $10.25 and the customer pays with a $20 bill, the program will print out the most eff ...

  2. 星星字体 ps教程

    本教程主要使用Photoshop制作绚丽星空装饰的艺术字教程,这个教程很简单,只需要一些简单技巧,即可做出海报.书籍杂志的封面效果.其中的字体.笔刷和背景均可以更换 教程所需要的素材链接:http:/ ...

  3. ShellExecute的各种用法

    一.利用系统默认的邮件收发器发送电子邮件 Uses ..., ShellAPI; Var lpHwnd: HWND; lpOperation, lpFile, lpParameters, lpDire ...

  4. c++ struct 使用

     typedef与结构结合使用 typedef struct tagMyStruct{  int iNum; long lLength;} MyStruct; 这语句实际上完成两个操作: 1) 定义一 ...

  5. [POJ] #1005# I Think I Need a Houseboat : 浮点数运算

    一. 题目 I Think I Need a Houseboat Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 97512 ...

  6. BOX2D测试

    ; ; Box2DTestLayer = cc.Layer.extend({ world:null, //GLESDebugDraw *m_debugDraw; ctor:function () { ...

  7. 【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 ...

  8. ipmotool

    ipmitool 命令收集 ipmitool 命令收集 from:http://blog.chinaunix.net/u2/70049/showart_1850139.html IPMI远程管理实验 ...

  9. Extjs4.2纯前台导出Excel总结

    前段时间做了两个项目,用到了Extjs4.2纯前台导出Excel,遇到很多的问题,从网上也找了很多资料,在这里总结一下,做一个记录: 使用方法: 1.下载extexcel文件包,这里可以下载http: ...

  10. Cisco SDM

    SDM连接方式:http+telnet / https+ssh   要使用SDM对CISCO设备实现集中式管理,必须在设备上键入如下命令:   步骤1: 要启用路由器的HTTP/HTTPS 服务器,请 ...