[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, ...
随机推荐
- 数往知来C#之接口 值类型与引用类型 静态非静态 异常处理 GC垃圾回收 值类型引用类型内存分配<四>
C# 基础接口篇 一.多态复习 使用个new来实现,使用virtual与override -->new隐藏父类方法 根据当前类型,电泳对应的方法(成员) -->override ...
- ipv4头部分析,读书笔记3
ip头部最长是60字节,前面的20字节是固定的,选项可加上40字节 4位版本号--- 对于ipv4来说呢,就是4 4位头部长度 --- 表示 有多小个32bit(4字节),4位最大表示数是15啦,也 ...
- servicestack操作redis
tatic void Main(string[] args) { );//redis服务IP和端口 #region =insert= var storeMembers = new List<st ...
- kali update can’t found win7 loader
安装win7,kali ,双系统,更新 kali 系统后, grub 找不到win7 ,无法进入win7系统. 解决: grub升级以后为grub2, grub2 默认不能识别win7, 更新一下,即 ...
- Jersey Rest服务类型
在Rest服务中,资源类是接收Rest请求并完成响应的核心类,而资源类由Rest服务的“提供者”来调度的,这一定义类似于自定义Servlet类,该类会奖请求分派给指定的Controller/Actio ...
- share-jquery
html val text区别: .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对 ...
- windows2008 RDP修改默认端口
PortNumber[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Teminal Sever\Wds\rdpwd\Tds\tcp] [HKE ...
- 第三百零八至三百二十天 how can I 坚持
十三天..2月4号至2月16号,好快,假期还没开始就结束了.一一回忆下. 2月4号,腊月二十六,最后一天上班,没多大事,好像是玩了一天,东月回家,貌似路上好折腾,晚上D401,和她聊了一路,也聊了好多 ...
- 解决SQLServer2008 Express远程连接出错的问题[Error: 1326错误]
sqlserver2008 Express版本默认是只能本机测试连接,不能被其他客户端访问,原因是因为Express版本的数据库被连接默认的TCP/IP监听是被关闭的,我们可以做一些设置实现我们的远程 ...
- Android教程说明-夜神模拟器连接IDE更新让Delphi发现你的手机或夜神模拟器
相关资料: [深圳]jiuk 发布 1.官网下载模拟器http://www.bignox.com/并运行 2.打开开发者选项刚开始是看不到的->关于平板电脑->多点几次版本号->打开 ...