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

سه شنبه ۹ شهریور ۱۴۰۰
بازدید ۶۵۵ نفر
AmRo
(5 امتیاز از 1 رای)
Loading...

تصویر angular-material-7-stepper_6393 کنترل Stepper در انگولار متریال 7 – آموزش انگولار متریال

کنترل Stepper در انگولار متریال

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

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

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

محتوای فایل 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 {MatStepperModule, MatInputModule, MatButtonModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatStepperModule, MatInputModule, MatButtonModule,
      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 {MatStepperModule, MatInputModule, MatButtonModule} from '@angular/material'

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatStepperModule, MatInputModule, MatButtonModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<mat-horizontal-stepper [linear] = "isLinear" #stepper>
   <mat-step [stepControl] = "firstFormGroup">
      <form [formGroup] = "firstFormGroup">
         <ng-template matStepLabel>Enter your name</ng-template>
         <mat-form-field>
            <input matInput placeholder = "Last name, First name" formControlName = "firstCtrl" required>
         </mat-form-field>
         <div>
           <button mat-button matStepperNext>Next</button>
         </div>
      </form>
   </mat-step>
   <mat-step [stepControl] = "secondFormGroup">
      <form [formGroup] = "secondFormGroup">
         <ng-template matStepLabel>Enter your address</ng-template>
         <mat-form-field>
           <input matInput placeholder = "Address" formControlName = "secondCtrl" required>
         </mat-form-field>
         <div>
           <button mat-button matStepperPrevious>Back</button>
           <button mat-button matStepperNext>Next</button>
         </div>
      </form>
   </mat-step>
   <mat-step>
      <ng-template matStepLabel>Done</ng-template>
         Details taken.
      <div>
         <button mat-button matStepperPrevious>Back</button>
         <button mat-button (click) = "stepper.reset()">Reset</button>
      </div>
   </mat-step>
</mat-horizontal-stepper>

<mat-horizontal-stepper [linear] = "isLinear" #stepper>

<mat-step [stepControl] = "firstFormGroup">

<ng-template matStepLabel>Enter your name</ng-template>

<mat-form-field>

</mat-form-field>

<div>

</div>

</form>

</mat-step>

<mat-step [stepControl] = "secondFormGroup">

<ng-template matStepLabel>Enter your address</ng-template>

<mat-form-field>

</mat-form-field>

<div>

</div>

</form>

</mat-step>

<mat-step>

<ng-template matStepLabel>Done</ng-template>

Details taken.

<div>

<button mat-button (click) = "stepper.reset()">Reset</button>

</div>

</mat-step>

</mat-horizontal-stepper>

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

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
import { FormGroup } from "@angular/forms";
import { FormBuilder } from "@angular/forms";
import { Validators } from "@angular/forms";
export interface Food {
   value: string;
   display: string;
}
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp';
   firstFormGroup: FormGroup;
   secondFormGroup: FormGroup;
   constructor(private _formBuilder: FormBuilder) {}
   ngOnInit() {
      this.firstFormGroup = this._formBuilder.group({
         firstCtrl: ['', Validators.required]
      });
      this.secondFormGroup = this._formBuilder.group({
         secondCtrl: ['', Validators.required]
      });
   }
}

import { Component } from '@angular/core';

import { FormControl } from "@angular/forms";

import { FormGroup } from "@angular/forms";

import { FormBuilder } from "@angular/forms";

import { Validators } from "@angular/forms";

export interface Food {

value: string;

display: string;

}

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'materialApp';

firstFormGroup: FormGroup;

secondFormGroup: FormGroup;

constructor(private _formBuilder: FormBuilder) {}

ngOnInit() {

this.firstFormGroup = this._formBuilder.group({

firstCtrl: ['', Validators.required]

});

this.secondFormGroup = this._formBuilder.group({

secondCtrl: ['', Validators.required]

});

}

نتیجه

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

تصویر angular-material-7-stepper_6393_1 کنترل Stepper در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

در ابتدا ما با استفاده از دستورالعمل mat-stepper یک Stepper ایجاد کرده ایم.
سپس با استفاده از دستورالعمل mat-step محتوای مربوط به هر مرحله را اضافه نموده ایم.

انگولار متریال - Tab انگولار متریال - List