[Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup
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>
[Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup的更多相关文章
- [Angular2 Form] Style Validation in Angular 2 Forms
Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [Angular2 Form] Create custom form component using Control Value Accessor
//switch-control component import { Component } from '@angular/core'; import { ControlValueAccessor, ...
随机推荐
- pssh 不能执行指定用户命令
问题: 一个脚本a.sh(必须root用户执行),在本地可以运行,通过pssh -h ip_file "cd /home/byte/a.sh"不能执行. 原因: 分析应该是ssh ...
- javascript --- jQuery --- Deferred对象
javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应 ...
- win7 提示"Windows 无法连接到System Event Notification Service服务......"的解决办法
登录win7系统,突然出现如图1的提示,无线网络中断,不能上网,多次插拔无线网卡问题依然. 图1 解决过程如下: 1.检查网卡硬件状况,在设备管理器中查看网卡现象正常,排除网卡硬件故障. 2.查看服务 ...
- NET知识大纲
第一部分 C#编程基础 1.(30)变量.运算符(+.-.*./.++.--.括号.==.!=.>.<.>=.<=.&&.||).流程控制(if.while.f ...
- 在Python中怎么表达True
在Python中怎么表达True 为False的几种情况 0为False,其他所有数值皆为True 空串("")为False,其他所有字符串皆为True 空list([])为F ...
- PHP强大的内置filter (一)
<?php #PHP内置的validate filter $input_data = True; $result = filter_var($input_data,FILTER_VALIDATE ...
- .gitignore 文件列表
GitHub 有一个十分详细的针对数十种项目及语言的 .gitignore 文件列表,你可以在https://github.com/github/gitignore 找到它.
- [WinForm] 使用 WebBrowser 操作 HTML 頁面的 Element-摘自网络
前言 在 Window Form 應用程式如果需要瀏覽網頁時可以崁入 WebBrowser 控制項,但如果需要操作崁入的 HTML 的網頁元素,就需要額外的操作,以下紀錄幾種操作 HTML 元素的方法 ...
- 第三百四十天 how can I 坚持
感觉还是要制定个计划,做不做不到是一回事,但是得制定.目标,一年时间进小米,加油,fordream 计划好好想想,技不在多,精就好. 晚上写了写杨辉三角,都不记得什么是杨辉三角了. 人言落日是天涯,望 ...
- 关于MAC下的QQ聊天中看不到对方所发的图片解决
使用QQ聊天我们会经常碰到一件让人烦心的事情,那就是别人发的截图自己看不大,是一张裂图(腾讯默认的那张图片).通常有几种情况可以造成这种结果: 第一种原因,网络延迟原因,你的网络不好或者对方的网络不好 ...