[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 label
s will match up with each input. This lesson shows how to use *ngFor
with radio buttons and covers the quirks of the id
property and for
attributes as well as how to style validation of radio buttons.
<!-- Radio button-->
<form action="" name="myFom4" #myForm4="ngForm">
<div *ngFor="let location of locations">
<input type="radio"
name="location"
ngModel
[value]="location"
[id]="location"
required
>
<label [attr.for]="location">{{location}}</label>
</div>
</form>
<pre>
{{myForm4.value | json}}
</pre>
input.ng-invalid + label:after {
content: '<--Requried to selet one'
}
import {Component, OnInit} from '@angular/core'; @Component({
selector: 'app-message',
templateUrl: './message.component.html',
styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit { locations: Array<string>; constructor() {
} ngOnInit() {
this.locations = [
'China',
'Finland',
'Norway',
'Japan'
];
}
}
[Angular2 Form] Create Radio Buttons for Angular 2 Forms的更多相关文章
- [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] 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] 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] Create custom form component using Control Value Accessor
//switch-control component import { Component } from '@angular/core'; import { ControlValueAccessor, ...
- [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 ...
- JSF 2 radio buttons example
In JSF, "h:selectOneRadio" tag is used to render a set of HTML input element of type " ...
- Reading CheckBoxes and Radio Buttons
Input tags with the type attribute checkbox can be grouped like radio buttons so that several checkb ...
- Create CSS3 Buttons Compatible with All Browsers
Create CSS3 Buttons Compatible with All Browsers http://www.ourtuts.com/create-css3-buttons-compatib ...
- mfc Radio Buttons
添加单选按钮 关联变量 调试宏TRACE BOOL类型 一.添加一组单选按钮 二.添加第二组单选按钮 三.关联变量 四.单选按钮运用 void CMY_Dialog::OnBnClickedButto ...
随机推荐
- cocos2dx 2.x版本:简化提炼tolua++绑定自定义类到lua中使用
cocos2dx的3.x版本已经提供了更好地绑定方式,网上有很多相关的教程,这里给一个链接:http://www.cocoachina.com/bbs/read.php?tid=196416. 由于目 ...
- 华丽的bootstrap3碰到土鳖IE6
之前由于看好很容易上手的bootstrap,然后用这个框架写了个网站,对于不会美工和细致设计的攻城师来说,bootstrap是个界面设计的瑞士军刀,三下五除二就能搞定个不算太丑的页面. 吭哧吭哧工作了 ...
- 黑马程序员——Foundation中的OC结构体
<span style="font-size:14px">------<a target="_blank" href="http:/ ...
- Linux-sed用法
本文为转载,原地址:http://www.cnblogs.com/dong008259/archive/2011/12/07/2279897.html sed是一个很好的文件处理工具,本身是一个管道命 ...
- linux c多线程编程范例
#include <stdio.h> #include <pthread.h> #include <unistd.h> #include <stdlib.h& ...
- leetcode@ [273] Integer to English Words (String & Math)
https://leetcode.com/problems/integer-to-english-words/ Convert a non-negative integer to its englis ...
- Cocos2d-JS v3.0 alpha 导入 cocostudio的ui配置
1.在新项目的根文件夹下打开project.json文件,修改: "modules" : ["cocos2d", "extensions", ...
- knowledge
- linux硬件时间修改与查看
linux修改时间和日期.查看修改硬件时间 Linux时钟分为系统时钟(System Clock)和硬件(Real Time Clock,简称RTC)时钟.系统时钟是指当前Linux Kernel中的 ...
- Hadoop构成
What Is Apache Hadoop? The Apache™ Hadoop® project develops open-source software for reliable, scala ...