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

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

تصویر angular-material-7-radio-button_6362 کنترل Radio Button در انگولار متریال 7 – آموزش انگولار متریال

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

یک دستورالعمل انگولار است و همانطور از اسم آن نیز مشخص است به منظور ایجاد دکمه های رادیویی استفاده می شود (دکمه هایی به شکل ).

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

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

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

محتوای فایل 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 کنترل Radio Button در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

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

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