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. 数往知来C#之接口 值类型与引用类型 静态非静态 异常处理 GC垃圾回收 值类型引用类型内存分配<四>

    C# 基础接口篇 一.多态复习 使用个new来实现,使用virtual与override    -->new隐藏父类方法 根据当前类型,电泳对应的方法(成员)    -->override ...

  2. ipv4头部分析,读书笔记3

    ip头部最长是60字节,前面的20字节是固定的,选项可加上40字节 4位版本号--- 对于ipv4来说呢,就是4 4位头部长度 ---  表示 有多小个32bit(4字节),4位最大表示数是15啦,也 ...

  3. servicestack操作redis

    tatic void Main(string[] args) { );//redis服务IP和端口 #region =insert= var storeMembers = new List<st ...

  4. kali update can’t found win7 loader

    安装win7,kali ,双系统,更新 kali 系统后, grub 找不到win7 ,无法进入win7系统. 解决: grub升级以后为grub2, grub2 默认不能识别win7, 更新一下,即 ...

  5. Jersey Rest服务类型

    在Rest服务中,资源类是接收Rest请求并完成响应的核心类,而资源类由Rest服务的“提供者”来调度的,这一定义类似于自定义Servlet类,该类会奖请求分派给指定的Controller/Actio ...

  6. share-jquery

    html val text区别: .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对 ...

  7. windows2008 RDP修改默认端口

    PortNumber[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Teminal Sever\Wds\rdpwd\Tds\tcp] [HKE ...

  8. 第三百零八至三百二十天 how can I 坚持

    十三天..2月4号至2月16号,好快,假期还没开始就结束了.一一回忆下. 2月4号,腊月二十六,最后一天上班,没多大事,好像是玩了一天,东月回家,貌似路上好折腾,晚上D401,和她聊了一路,也聊了好多 ...

  9. 解决SQLServer2008 Express远程连接出错的问题[Error: 1326错误]

    sqlserver2008 Express版本默认是只能本机测试连接,不能被其他客户端访问,原因是因为Express版本的数据库被连接默认的TCP/IP监听是被关闭的,我们可以做一些设置实现我们的远程 ...

  10. Android教程说明-夜神模拟器连接IDE更新让Delphi发现你的手机或夜神模拟器

    相关资料: [深圳]jiuk 发布 1.官网下载模拟器http://www.bignox.com/并运行 2.打开开发者选项刚开始是看不到的->关于平板电脑->多点几次版本号->打开 ...