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

    为了扩充ASCII编码,以用于显示本国的语言,不同的国家和地区制定了不同的编码标准,由此产生了GB2312.BIG5.JIS等各自的编码标准.这些使用两个字节来代表一个字符的各种汉字延伸编码方式被称为 ...

  2. 【LeetCode】111 - Minimum Depth of Binary Tree

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  3. 朝鲜RedStar_OS_3.0安装图解

    前天exploit-db上出现了3个Local Exploit,都是来自朝鲜的RedStar 3.0的vul.网上也下到了镜像,按网上的方法测试了下,真的是 ————————————————————— ...

  4. RPC进阶篇

    RPC实现结构拆解 RPC过程调用详解:RPC 服务端通过 RpcServer 去导出(export)远程接口方法,而客户端通过 RpcClient 去引入(import)远程接口方法. 客户端像调用 ...

  5. Java正则表达式获取网页所有网址和链接文字

    ;         pos1= urlContent.indexOf(strAreaBegin)+strAreaBegin.length();         pos2=urlContent.inde ...

  6. linux中hosts文件的修改

    转载自http://hi.baidu.com/dillisbest/item/5e0b612d011b4cd40e37f9a6 1. 关于/etc/host,主机名和IP配置文件 Hosts - Th ...

  7. vmware10中开启Intel VT-x

    记得刚接触linux的时候,是在win7下使用vmware虚拟机来安装linux,这样就可以方便的一边使用win7娱乐,一边在linux下进行学习.后来发现这种方式使得win7很卡,虚拟机也很卡,让人 ...

  8. Android将ScrollView移动到最底部

    转载地址:http://hi.baidu.com/gaogaf/item/36e8a4c8ac6ba31050505848 scrollTo方法可以调整view的显示位置.在需要的地方调用以下方法即可 ...

  9. CenotOS ip a

  10. 第三百三十五天 how can I 坚持

    晚上回来看了个奥斯卡影片,<疯狂的麦克斯-狂暴之路>,挺震撼的场面.导演确实挺厉害,不知道是怎么想象出来的. 睡觉,明天继续.