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. 朝鲜RedStar_OS_3.0安装图解

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

  2. AI线性图标教程-转起

  3. Tcl之group arguments

    1 doubel quotes This allows substitutions to occur within the quotations - or "interpolation&qu ...

  4. SQLyog Enterprise 8.14

    用户名:yunjian注册码:81f43d3dd20872b6 下载地址:SQLyog Enterprise 8.14

  5. Yarn通信过程

    yarn包括两块,一个是ResourceManager,主要的作用是管理集群上的资源,目前hadoop版本上,管理的只有cpu和内存. 另外一个叫NodeManager,这上面会跑我们的程序,叫App ...

  6. navigationController 之间的切换

    项目要实现从一个Navigation 下push出的第N层controller后 立即切换到另一个 Navigation下 例如:在微信的通讯录Nav中选择一个好友,进入好友的详细资料,点击发消息按钮 ...

  7. phonegap 新窗口 WebView

    自定义WebView窗口打开 import com.ap.work.QuickWeb public class QuickPlugin extends CordovaPlugin { /** * 新开 ...

  8. [iOS微博项目 - 2.2] - 在app中获取授权

    github: https://github.com/hellovoidworld/HVWWeibo   A.发送授权请求 1.使用UIWebView加载请求页面 自定义一个继承UIViewContr ...

  9. Android反射出一个类中的其他类对象并调用其对应方法

    MainActivity如下: package cn.testreflect; import java.lang.reflect.Field; import java.lang.reflect.Met ...

  10. HDU 5438 Ponds (DFS,并查集)

    题意:给定一个图,然后让你把边数为1的结点删除,然后求连通块结点数为奇的权值和. 析:这个题要注意,如果删除一些结点后,又形成了新的边数为1的结点,也应该要删除,这是坑,其他的,先用并查集判一下环,然 ...