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. pssh 不能执行指定用户命令

    问题: 一个脚本a.sh(必须root用户执行),在本地可以运行,通过pssh  -h ip_file "cd /home/byte/a.sh"不能执行. 原因: 分析应该是ssh ...

  2. javascript --- jQuery --- Deferred对象

    javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应 ...

  3. win7 提示"Windows 无法连接到System Event Notification Service服务......"的解决办法

    登录win7系统,突然出现如图1的提示,无线网络中断,不能上网,多次插拔无线网卡问题依然. 图1 解决过程如下: 1.检查网卡硬件状况,在设备管理器中查看网卡现象正常,排除网卡硬件故障. 2.查看服务 ...

  4. NET知识大纲

    第一部分 C#编程基础 1.(30)变量.运算符(+.-.*./.++.--.括号.==.!=.>.<.>=.<=.&&.||).流程控制(if.while.f ...

  5. 在Python中怎么表达True

    在Python中怎么表达True   为False的几种情况 0为False,其他所有数值皆为True 空串("")为False,其他所有字符串皆为True 空list([])为F ...

  6. PHP强大的内置filter (一)

    <?php #PHP内置的validate filter $input_data = True; $result = filter_var($input_data,FILTER_VALIDATE ...

  7. .gitignore 文件列表

    GitHub 有一个十分详细的针对数十种项目及语言的 .gitignore 文件列表,你可以在https://github.com/github/gitignore 找到它.

  8. [WinForm] 使用 WebBrowser 操作 HTML 頁面的 Element-摘自网络

    前言 在 Window Form 應用程式如果需要瀏覽網頁時可以崁入 WebBrowser 控制項,但如果需要操作崁入的 HTML 的網頁元素,就需要額外的操作,以下紀錄幾種操作 HTML 元素的方法 ...

  9. 第三百四十天 how can I 坚持

    感觉还是要制定个计划,做不做不到是一回事,但是得制定.目标,一年时间进小米,加油,fordream 计划好好想想,技不在多,精就好. 晚上写了写杨辉三角,都不记得什么是杨辉三角了. 人言落日是天涯,望 ...

  10. 关于MAC下的QQ聊天中看不到对方所发的图片解决

    使用QQ聊天我们会经常碰到一件让人烦心的事情,那就是别人发的截图自己看不大,是一张裂图(腾讯默认的那张图片).通常有几种情况可以造成这种结果: 第一种原因,网络延迟原因,你的网络不好或者对方的网络不好 ...