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. 一起来画画!8款最佳HTML5绘图工具

    HTML5无疑是当前最受宠的一项技术,今天推荐8款HTML5绘图工具,同样惊艳你的眼球!这些绘图工具大多数是用HTML5画布(Canvas)实现的,部分辅以Javascript.对每一个web设计者来 ...

  2. 原生JS取代一些JQuery方法

    1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorth ...

  3. Hibernate中openSession() 与 getCurrentSession()的区别

    1 getCurrentSession创建的session会和绑定到当前线程,而openSession每次创建新的session. 2 getCurrentSession创建的线程会在事务回滚或事物提 ...

  4. sqlite 批量插入, 重复插入(更新)

    [FMDBManager inDatabase:^(FMDatabase *db) { [db shouldCacheStatements]; //开始启动事务 [db beginTransactio ...

  5. 【FFT】专题总结

    学了若干天终于学(bei)会了传说中的法法塔 感觉也没那么难用嘛 fft快速傅里叶变换 在大表课件上写就是解决高精乘的工具 其实很有理有据 fft就是用复数的折半引理优化两个多项式相乘的高端东西 他能 ...

  6. HD2144Calculate S(n)

    Problem Description Calculate S(n). S(n)=13+23 +33 +......+n3 . Input Each line will contain one int ...

  7. Jenkins+Gitlab搭建持续集成(CI)环境

    利用Jenkins+Gitlab搭建持续集成(CI)环境 Permalink: 2013-09-08 22:04:00 by hyhx2008in intern tags: jenkins gitla ...

  8. Window服务初级教程以及log4net配置文件初始化

    Window服务初级教程:http://www.jb51.net/article/48987.htm 另外,配置log4net这个日志功能的时候需要初始化,不然会报没有初始化的错误,而且初始化的节点应 ...

  9. 使用logmnr方法找回被误删除Oracle的数据的脚本

    俗话说,常在河边走,哪有不湿鞋的.作为一个经常与数据库打交道的程序员,偶尔不小心误删除或误操作的数据也是在所难免的.如果是Oracle数据库,这里给您介绍一种从日志中找回数据的办法,下面这个地址是我以 ...

  10. django admin site (三)

    1.自定义模板设置: ModelAdmin. add_form_template Path to a custom template, used by add_view(). ModelAdmin. ...