کنترل Radio Button در انگولار متریال ۷
<mat-radiobutton> یک دستورالعمل انگولار است و همانطور از اسم آن نیز مشخص است به منظور ایجاد دکمه های رادیویی استفاده می شود (دکمه هایی به شکل <input type=”radio”>).
در این بخش چگونگی ایجاد و استفاده از کنترل <mat-radiobutton> در انگولار را بررسی خواهیم کرد.
ایجاد برنامه انگولار
در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل <mat- input> تغییر می دهیم.
محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatRadioModule} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatRadioModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
محتوای فایل app.component.css:
1 2 3 4 5 6 7 8 9 10 | .tp-radio-group { display: inline-flex; flex-direction: column; } .tp-radio-button { margin: 5px; } .tp-selected-value { margin: 15px 0; } |
محتوای فایل app.component.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { Component } from '@angular/core'; import { FormControl } from "@angular/forms"; import { Validators } from "@angular/forms"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'materialApp'; favoriteSeason: string; seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn']; } |
محتوای فایل app.component.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <mat-radio-group class = "tp-radio-group" [(ngModel)] = "favoriteSeason"> <mat-radio-button class = "tp-radio-button" *ngFor = "let season of seasons" [value] = "season"> {{season}} </mat-radio-button> </mat-radio-group> <div class = "tp-selected-value"> Selected Season: {{favoriteSeason}} </div> |
نتییجه
بعد از اجرا برنامه خروجی زیر را مشاهده خواهید کرد:
جزئیات
- در ابتدا ما با استفاده از mat-radio-group یک گروه از دکمه های رادیویی را ایجاد کردیم.
- سپس با استفاده از mat-radio-button و دستورالعمل ngModel آیتم های آرایه تعریف شده در کلاس کامپوننت را به عنوان دکمه رادیویی به این گروه اضافه کرده ایم.
هیچ نظری ثبت نشده است