Reputation: 269
I'm trying to bind formly select type options using this code :
fieldGroup: [
{
key: 'TimeOffTypeID',
type: 'select',
className: 'flex-40 padding-10',
templateOptions: {
label: 'نوع مرخصی',
placeholder: 'نوع مرخصی',
required: true,
options: this.getTimeoffType,
valueProp: 'TimeOffTypeID',
labelProp: 'TimeOffTypeName',
},
and
types$: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
public get getTimeoffType(): Observable<any[]> {
return this.types$.asObservable();
}
and data Serrvice
getTimeoffTypes() {
this.base
.get(
Controller.TIMEOFFTYPE,
{
TimeOffTypeID: 0,
},
Actions.SEARCH
)
.subscribe(({ result }) => {
console.log(result)
this.types$.next(result);
})
}
The result has my data but this data is not bind to form select options
Upvotes: 1
Views: 1375
Reputation: 41
I faced the same issue, the options weren't shown. Highlighted code below helped resolve it; templateOptions : { label : "Gender.", labelProp : "name", valueProp : "value", options : [ { "name" : "Male", "value" : "male" }, { "name" : "Female", "value" : "female" }, { "name" : "Others", "value" : "others" } ], Note: I am using Formly Material
Upvotes: 1
Reputation: 2199
Try something like this:
app.service.ts
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class TypeService {
private types$ = new Subject<any>();
sendTypes(type: any) {
this.types$.next({ data: type });
}
clearTypes() {
this.types$.next();
}
getTypes(): Observable<any[]> {
return this.types$.asObservable();
}
}
app.component.ts
import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { TypeService } from './_services/index';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnDestroy {
types: any[] = [];
subscription: Subscription;
constructor(private typeService: TypeService) {
// subscribe to home component messages
this.subscription = this.typeService.getTypes().subscribe( type => {
if (type) {
this.types.push(type);
} else {
// clear messages when empty message received
this.type = [];
}
});
}
ngOnDestroy() {
// unsubscribe to ensure no memory leaks
this.subscription.unsubscribe();
}
}
Upvotes: 0