[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, ...
随机推荐
- bzoj1013
这道题题解太多,只贴代码. #include<cstdio> #include<cmath> #include<algorithm> using namespace ...
- 新霸哥带你进入java的世界
新霸哥从近期大家的留言中注意到了大家对基础知识比较重视,很多的朋友希望多讲一些入门的知识,为了满足广大开发爱好者的需求,新霸哥决定从最基础的做起,一点一点的帮助大家一起走进云计算的世界.下面新霸哥首先 ...
- HW7.14
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml if executing in update mode) -> [Help 1]
mvn war:war命令出错: 原因: maven的web项目默认的webroot是在src\main\webapp.如果在此目录下找不到web.xml就抛出以上的异常. 解决方案: 在pom.xm ...
- dom 优酷得弹出
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- java 的开源wiki维基系统
几乎所有 维基 系统的对比网址: http://www.wikimatrix.org/ XWiki, 第二代wiki. 它里面使用的 velocity 模板语言对j2ee开发相当有参考价值, ...
- invoking gdb
[invoking gdb] The most usual way to start gdb is with one argument, specifying an executable progra ...
- hibernate search例子
[TOC] 1. 概念介绍 1.1. Hibernate Search Hibernate Search是Hibernate的子项目,把数据库全文检索能力引入到项目中,并通过"透明" ...
- 咏南WEB开发框架
和咏南CS开发框架共享同一个咏南中间件.
- HDU 5821 Ball (排序)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5821 有n个盒子,每个盒子最多装一个球. 现在进行m次操作,每次操作可以将l到r之间盒子的球任意交换. ...