标签:
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
标签:
原文地址:http://www.cnblogs.com/Answer1215/p/5918496.html