کنترل Radio Button در انگولار متریال ۷ – آموزش انگولار متریال

جمعه ۲۹ اسفند ۱۳۹۹
بازدید ۳۶۳ نفر
یعثوب سیفی زاده
(۵ امتیاز از ۱ رای)
Loading...

angular material 7 radio button 6362 تصویر

کنترل Radio Button در انگولار متریال ۷

<mat-radiobutton> یک دستورالعمل انگولار است و همانطور از اسم آن نیز مشخص است به منظور ایجاد دکمه های رادیویی استفاده می شود (دکمه هایی به شکل <input type=”radio”>).

در این بخش چگونگی ایجاد و استفاده از کنترل <mat-radiobutton> در انگولار را بررسی خواهیم کرد.

ایجاد برنامه انگولار

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل <mat- input> تغییر می دهیم.

محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:

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 { }

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:

.tp-radio-group {
   display: inline-flex;
   flex-direction: column;
}
.tp-radio-button {
   margin: 5px;
}
.tp-selected-value {
   margin: 15px 0;
}

.tp-radio-group {

display: inline-flex;

flex-direction: column;

}

.tp-radio-button {

margin: 5px;

}

.tp-selected-value {

margin: 15px 0;

}

محتوای فایل app.component.ts:

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'];
}

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:

<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 class = "tp-radio-group" [(ngModel)] = "favoriteSeason">

<mat-radio-button class = "tp-radio-button"

*ngFor = "let season of seasons" [value] = "season">

</mat-radio-button>

</mat-radio-group>

Selected Season: {{favoriteSeason}}

</div>

نتییجه

بعد از اجرا برنامه خروجی زیر را مشاهده خواهید کرد:

angular material 7 radio button 6362 1 تصویر

جزئیات

در ابتدا ما با استفاده از mat-radio-group یک گروه از دکمه های رادیویی را ایجاد کردیم.
سپس با استفاده از mat-radio-button و دستورالعمل ngModel آیتم های آرایه تعریف شده در کلاس کامپوننت را به عنوان دکمه رادیویی به این گروه اضافه کرده ایم.

انگولار متریال - Select انگولار متریال - Input