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

    这道题题解太多,只贴代码. #include<cstdio> #include<cmath> #include<algorithm> using namespace ...

  2. 新霸哥带你进入java的世界

    新霸哥从近期大家的留言中注意到了大家对基础知识比较重视,很多的朋友希望多讲一些入门的知识,为了满足广大开发爱好者的需求,新霸哥决定从最基础的做起,一点一点的帮助大家一起走进云计算的世界.下面新霸哥首先 ...

  3. HW7.14

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  4. Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml if executing in update mode) -> [Help 1]

    mvn war:war命令出错: 原因: maven的web项目默认的webroot是在src\main\webapp.如果在此目录下找不到web.xml就抛出以上的异常. 解决方案: 在pom.xm ...

  5. dom 优酷得弹出

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. java 的开源wiki维基系统

    几乎所有 维基 系统的对比网址:   http://www.wikimatrix.org/ XWiki,    第二代wiki. 它里面使用的 velocity 模板语言对j2ee开发相当有参考价值, ...

  7. invoking gdb

    [invoking gdb] The most usual way to start gdb is with one argument, specifying an executable progra ...

  8. hibernate search例子

    [TOC] 1. 概念介绍 1.1. Hibernate Search Hibernate Search是Hibernate的子项目,把数据库全文检索能力引入到项目中,并通过"透明" ...

  9. 咏南WEB开发框架

    和咏南CS开发框架共享同一个咏南中间件.

  10. HDU 5821 Ball (排序)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5821 有n个盒子,每个盒子最多装一个球. 现在进行m次操作,每次操作可以将l到r之间盒子的球任意交换. ...