Topic: How to get selected value from select2
Mankongwatcharakul priority asked 4 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- 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