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

دوشنبه ۱۸ شهریور ۱۳۹۸
بازدید ۱,۵۹۸ نفر
آرتین
(14 امتیاز از 3 رای)
Loading...

تصویر angular-material-7-auto-complete_6325 کنترل Auto-Complete در انگولار متریال 7 - آموزش انگولار متریال

کنترل Auto-Complete در انگولار متریال 7

<mat-autocomplete> یک دستورالعمل انگولار است که برای ایجاد ورودی متن به همراه یک لیست برای پر کردن ورودی استفاده می شود. برای مثال هنگامی در بخش جستجوی سایت گوگل یک عبارت را تایپ می کنید، خود گوگل بر اساس متن تایپ شده چند مورد را برای جستجو به شما پیشنهاد می دهد. از <mat-autocomplete> می توان برای ایجاد بخش جستجو استفاده کرد. در این بخش ما نحوه ایجاد و استفاده از کنترل autocomplete را در متریال دیزاین بررسی خواهیم کرد.

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

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

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

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatAutocompleteModule,

MatInputModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<form class = "tp-form">
   <mat-form-field class = "tp-full-width">
      <input type = "text"
         placeholder = "US State"
         aria-label = "Number"
         matInput
         [formControl] = "myControl"
         [matAutocomplete] = "auto">
      <mat-autocomplete #auto = "matAutocomplete">
         <mat-option *ngFor = "let state of states" [value] = "state.value">
            {{state.display}}
         </mat-option>
      </mat-autocomplete>
   </mat-form-field>
</form>

<mat-form-field class = "tp-full-width">

<input type = "text"

placeholder = "US State"

aria-label = "Number"

matInput

[formControl] = "myControl"

[matAutocomplete] = "auto">

<mat-autocomplete #auto = "matAutocomplete">

<mat-option *ngFor = "let state of states" [value] = "state.value">

</mat-option>

</mat-autocomplete>

</mat-form-field>

</form>

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

.tp-form {
   min-width: 150px;
   max-width: 500px;
   width: 100%;
}
.tp-full-width {
   width: 100%;
}

.tp-form {

min-width: 150px;

max-width: 500px;

width: 100%;

}

.tp-full-width {

width: 100%;

}

کد زیر مربوط به فایل ویرایش شده app.component.ts است:

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp';
   myControl = new FormControl();
   states;
   constructor(){
      this.loadStates();
   }
   //build list of states as map of key-value pairs
   loadStates() {
      var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
         Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
         Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
         Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
         North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
         South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
         Wisconsin, Wyoming';
      this.states =  allStates.split(/, +/g).map( function (state) {
         return {
            value: state.toUpperCase(),
            display: state
         };
      });
   }
}

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

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

title = 'materialApp';

myControl = new FormControl();

states;

constructor(){

this.loadStates();

}

//build list of states as map of key-value pairs

loadStates() {

var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\

Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\

Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\

Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\

North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\

South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\

Wisconsin, Wyoming';

this.states = allStates.split(/, +/g).map( function (state) {

return {

value: state.toUpperCase(),

display: state

};

});

}

نتیجه

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

تصویر angular-material-7-auto-complete_6325_1 کنترل Auto-Complete در انگولار متریال 7 - آموزش انگولار متریال

جزئیات

در ابتدا ما یک فیلد ورودی ایجاد و یک autocomplete با نام auto را با استفاده از خاصیت [matAutocomplete] به آن بایند کردیم.
سپس یک کنترل autocomplete با استفاده از تگ mat-autocomplete ایجاد کرده ایم.
و با استفاده از *ngFor گزینه های مورد نظر را ایجاد کردیم.

انگولار متریال - Check box انگولار متریال - نصب