[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, ...
随机推荐
- 朝鲜RedStar_OS_3.0安装图解
前天exploit-db上出现了3个Local Exploit,都是来自朝鲜的RedStar 3.0的vul.网上也下到了镜像,按网上的方法测试了下,真的是 ————————————————————— ...
- AI线性图标教程-转起
- Tcl之group arguments
1 doubel quotes This allows substitutions to occur within the quotations - or "interpolation&qu ...
- SQLyog Enterprise 8.14
用户名:yunjian注册码:81f43d3dd20872b6 下载地址:SQLyog Enterprise 8.14
- Yarn通信过程
yarn包括两块,一个是ResourceManager,主要的作用是管理集群上的资源,目前hadoop版本上,管理的只有cpu和内存. 另外一个叫NodeManager,这上面会跑我们的程序,叫App ...
- navigationController 之间的切换
项目要实现从一个Navigation 下push出的第N层controller后 立即切换到另一个 Navigation下 例如:在微信的通讯录Nav中选择一个好友,进入好友的详细资料,点击发消息按钮 ...
- phonegap 新窗口 WebView
自定义WebView窗口打开 import com.ap.work.QuickWeb public class QuickPlugin extends CordovaPlugin { /** * 新开 ...
- [iOS微博项目 - 2.2] - 在app中获取授权
github: https://github.com/hellovoidworld/HVWWeibo A.发送授权请求 1.使用UIWebView加载请求页面 自定义一个继承UIViewContr ...
- Android反射出一个类中的其他类对象并调用其对应方法
MainActivity如下: package cn.testreflect; import java.lang.reflect.Field; import java.lang.reflect.Met ...
- HDU 5438 Ponds (DFS,并查集)
题意:给定一个图,然后让你把边数为1的结点删除,然后求连通块结点数为奇的权值和. 析:这个题要注意,如果删除一些结点后,又形成了新的边数为1的结点,也应该要删除,这是坑,其他的,先用并查集判一下环,然 ...