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

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

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

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ۷ ایجاد کرده بودیم را برای استفاده از کنترل 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 { }

محتوای فایل 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>

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

.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
         };
      });
   }
}

نتیجه

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

جزئیات

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

نوشته کنترل Auto-Complete متریال در انگولار ۷ – آموزش انگولار متریال اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

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