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. HTML5_画布_太阳系

    HTML5_画布_太阳系 一.canvas属性和方法的简单介绍①对于不支持canvas标签的浏览器需要显示"不支持canvas"使用IE11浏览器的开发人员工具,仿真:文档模式=8 ...

  2. MXML的一些基本语法

    以下内容是一个视频的学习笔记<Flex4视频教程>,所以,先关记录也是以现在的Flash Builder为基础. <fx:Script/>  是脚本文件的声明 var代表数值, ...

  3. 修改ssh服务的默认端口

    修改ssh服务的默认端口 1.查看当前服务端口 一般ssh服务的默认端口为22端口,查看监听的端口用netstat,如下: [root@ansiblemoniter ~]# netstat -tnlp ...

  4. Leetcode 210 Course Schedule II

    here are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prere ...

  5. Eclipse中Maven工程缺少Maven Dependencies

    Eclipse在引入Maven工程后,找不到Maven Dependencies.使得代码报错,具体如下图所示: 而正常Maven的工程如下所示: 产生这种现象的原因可能是工程对应的开发环境改变,本地 ...

  6. xcode 6.4 安装Alcatraz失败解决方法

    Alcatraz Xcode6.4安装不了解决方法http://www.cocoachina.com/bbs/read.php?tid=310380 版权声明:本文为博主原创文章,未经博主允许不得转载 ...

  7. cocos2d-html5对话界面设计

    "use strict" var _dialogMsgBottom = null; var _dialogMsgTop = null; ; var _dialogConfig = ...

  8. php 开发最好的ide: PhpStorm

    PhpStorm 跨平台. 对PHP支持refactor功能. 自动生成phpdoc的注释,非常方便进行大型编程. 内置支持Zencode. 生成类的继承关系图,如果有一个类,多次继承之后,可以通过这 ...

  9. gdb之watch命令

    [gdb之watch命令] 什么是watchpoint? watchpoint,顾名思义,其一般用来观察某个变量/内存地址的状态(也可以是表达式),如可以监控该变量/内存值是否被程序读/写情况. 在g ...

  10. HDU4289Control(最大流)

    看了这道题,然后重新开始练习自己的刚敲不久的网络流,发现还是难以一遍敲得完整啊,,,,, 调了...遍,改了...遍,测了...遍,交了,,,遍,总算是A了,,不简单啊 然后试着用了其他两种算法EK和 ...