کتابخانه Select2-Aurora راهکاری جدید در پیاده سازی select در انگولار

کتابخانه select-2-aurora یک پیاده سازی جدید از فرم کنترل select می‌باشد. در این کتابخانه همانند قبل می‌توانید لیست option های خود را اضافه کنید. با این تفاوت که این بار امکان جستجو در لیست option ها را هم دارید. یکی از امکانات جالب این کتابخانه دریافت داده ها از API می‌باشد. به این صورت که کافی است آدرس API خود را به ورودی دهید، سپس خود کنترل، داده ها را از API دریافت و نمایش می‌دهد.

در زیر یک نمایش demo از کامپوننت را مشاهده می کنید:

روش نصب و استفاده

برای نصب آخرین نسخه می‌توانید از دستور زیر استفاده کنید:

npm i select2-aurora@latest

در صورتی که بخواهید نسخه بخصوصی را نصب کنید، می توانید از دستور زیر استفاده کنید:

npm i [email protected]

بعد از نصب کتابخانه، باید Select2AuroraModule را به ماژول مورد نظر خودتان اضافه کنید. در اینجا به app.modules.ts اضافه کرده ایم.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Select2AuroraModule } from 'select2-aurora';       // <-- here

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    Select2AuroraModule     // <-- here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

طریقه استفاده از کتابخانه با استفاده از خصوصیت optionList

کتابخانه select2-aurora خصوصیتی به نام optionList دارد. optionList لیستی از اشیایی از نوع AuroraSelectModel می‌باشد. برای تعریف optionList در ابتدا کلاس AuroraSelectModel را به کامپوننت خود import کنید. سپس همانند مثال زیر لیست option های خود را بسازید.

import { AuroraSelectModel } from 'select2-aurora';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  countriesList: Array<AuroraSelectModel> = new Array<AuroraSelectModel>();

  ngOnInit()
  {
    this.initOptionList();
  }

  initOptionList()
  {
    this.countriesList = new Array<AuroraSelectModel>();
    this.countriesList.push(new AuroraSelectModel(1, 'Austria'));
    this.countriesList.push(new AuroraSelectModel(2, 'Belgium'));
    this.countriesList.push(new AuroraSelectModel(3, 'Finland'));
    this.countriesList.push(new AuroraSelectModel(4, 'France'));
    this.countriesList.push(new AuroraSelectModel(5, 'Germany'));
    this.countriesList.push(new AuroraSelectModel(6, 'Spain'));
    this.countriesList.push(new AuroraSelectModel(7, 'Portugal'));
  }
}

سپس select2-aurora را در template تعریف کنید:

‍‍<select2-aurora  [optionList]="countriesList" >
</select2-aurora>

طریقه استفاده select2-aurora در یک فرم

همانند فرم کنترلر های معمولی، از select2-aurora هم می‌توان به عنوان یک فرم کنترلر استفاده کرد. در زیر یک مثال از این نوع کاربرد بیان شده است.

import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
import { AuroraSelectModel } from 'select2-aurora';

export class AppComponent implements OnInit {
  countriesList: Array<AuroraSelectModel> = new Array<AuroraSelectModel>();  
  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder)
  {}

  ngOnInit()
  {
    this.initOptionList();
    this.createForm();
  }

  createForm()
  {
    this.formGroup = this.formBuilder.group({
      countryFC: new FormControl()
    });
  }

  initOptionList()
  {
    // as previous example
  }

  onSaveForm()
  {
    console.log(this.formGroup.value);
  }
}

حتی اگر optionList خود را مقداردهی کرده باشید، می‌توانید به فرم کنترل مقدار پیش فرض هم بدهید.

this.formGroup = this.formBuilder.group({
  countryFC: new FormControl(2)
});

سپس در template از آن به صورت زیر استفاده کنید:

<form [formGroup]="formGroup" (ngSubmit)="onSaveForm()">
  <span>Countries:</span>
  <select2-aurora
    formControlName="countryFC"
    [optionList]="countriesList"
  >
  </select2-aurora>
  <br>

  <button type="submit" name="button">Save</button>
</form>

سرویس API

همان طور که قبلا ذکر شد، شما می‌توانید optionList خود را با استفاده از یک سرویس API مقداردهی کنید. بدین منظور، کافی است که یک API بنویسید که در پاسخ لیستی از JSON ها با دو خصوصیت id و label را دارا باشد.

apiUrl = 'http://127.0.0.1:8000/view1/';

<select2-aurora
  formControlName="countryFC"
  [apiUrl]="apiUrl"
>
</select2-aurora>

اگر API نیاز به توکن JWT داشته باشد، می‌توانید آن را به select2-aurora به عنوان ورودی پاس دهید.

apiUrl = 'http://127.0.0.1:8000/view1/';
jwtToken = 'dfsdfe3423i4jfhsdjnvsjhr3h4j23h4j23h4j232j4';

<select2-aurora
  formControlName="countryFC"
  [apiUrl]="apiUrl"
  [jwtToken]="jwtToken"
>
</select2-aurora>

به این نکته توجه کنید که اگر همزمان هم از optionList و هم از apiUrl استفاده کنید، کتابخانه فقط apiUrl را در نظر می گیرد.

کتابخانه select2-aurora یک پروژه متن باز می‌باشد، که هنوز در ابتدای کار توسعه است. شما می‌توانید از طریق لینک زیر به کتابخانه دسترسی داشته باشید و با حفظ ذکر منبع، آن را برای خود شخصی سازی کنید.