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. 转 AI教程 logo

    版权申明:本文原创作者飞屋工作室,感谢飞屋工作室的原创分享! 这篇AI制作标志教程是一个非常实用的教程.通过这个教程飞特的朋友们将会学习到AI制作标志的流程和标志的创作思路.非常实用.推荐过来和飞特的 ...

  2. O2O在线教育平台策划方案

    一.情景需求痛点: 学生: 1.除了上课上课,就是作业作业,学习太枯燥不好玩怎么办?——我就是想要玩玩玩! 2.第二天要交作业,老师不在,在家作业不懂怎么办?——我想要随身老师! 3.噢耶,周末不用上 ...

  3. Android 设置 横屏 竖屏 (转)

    http://2960629.blog.51cto.com/2950629/701227 方法一:在AndroidManifest.xml中配置 如果不想让软件在横竖屏之间切换,最简单的办法就是在项目 ...

  4. Bluebird-Core API(二)

    .error .error([function(any error) rejectedHandler]) -> Promise 和catch一样,但是catch捕获了所有错误类型的异常,而err ...

  5. gson在java和json串之间的应用

    public class JsonToJavaUtil { /** * 将json转成成javaBean对象 * * @param <T> * 返回类型 * @param json * 字 ...

  6. [LeetCode] #167# Two Sum II : 数组/二分查找/双指针

    一. 题目 1. Two Sum II Given an array of integers that is already sorted in ascending order, find two n ...

  7. HDU 2544 最短路 http://acm.hdu.edu.cn/showproblem.php?pid=2544

    //代码: //方法1:Dijkstra's Algorithm #include<stdio.h> #include<math.h> #include<string.h ...

  8. windows 7 获取SYSTEM权限

    当Adobe Reader 9.0卸载之后,你会发现原来的C:\Program Files\Adobe\Reader 9.0\Resource\CMap文件夹下的一些文件无法删除,提示你需要SYSTE ...

  9. 代码SketchPaintCode绘制

    作者:codeGlider 在我的上一篇文章中 swift10分钟实现炫酷的导航控制器跳转动画,有一个swift logo的形状 上一篇文章的动画 我说的就是中间用来做遮罩的形状. 它不是图片是用一段 ...

  10. Codeforces 660 C. Hard Process (尺取)

    题目链接:http://codeforces.com/problemset/problem/660/C 尺取法 #include <bits/stdc++.h> using namespa ...