Topic: How to get selected value from select2

Mankongwatcharakul priority asked 3 years ago


How do I get value form mdb-select ? This is my code. ts file. import { Guid } from 'guid-typescript'; import { MasterService } from '../order/services/master.service'; import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; import { Observable, Subscription } from 'rxjs'; import { startWith, map } from 'rxjs/operators'; import { Sender } from './shared/sender.model';

@Component({ selector: 'app-order', templateUrl: './order.component.html', styleUrls: ['./order.component.scss'] }) export class OrderComponent implements OnInit, OnDestroy { senderSubscription: Subscription;

orderForm: FormGroup; senderId: Guid; // select2 filteredOptions: Observable; options: Sender[] = [];

// constructor(private fb: FormBuilder, private mservice: MasterService) { this.orderForm = this.fb.group({ senderSelect: ['', Validators.required] }); this.getSender(); } ngOnInit(): void { this.filteredOptions = this.orderForm.controls.senderSelect.valueChanges.pipe( startWith(''), map((value: string) => this.filter(value)) ); } filter(value: string): any[] { const filterValue = value.toLowerCase(); return this.options.filter((option: any) => option.label.toLowerCase().includes(filterValue)); } getSelectedValue(value: any) { console.log('Selected value:', value); console.log(Sender id : ${this.senderId}) } getSender(): void { this.senderSubscription = this.mservice.getSenders().subscribe(x => { this.options = x; console.log(this.options); }, error => console.log(error), () => console.log('Done')); } ngOnDestroy(): void { this.senderSubscription.unsubscribe(); } } // html file

{{ option.label }}

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 10.0.0
  • Device: labtop
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: Yes
  • Provided link: No