CODEWITHSUNDEEP
angulartypescriptbehaviorsubjectangular-formly
maral
maral

Reputation: 269

Binding angular formly select option not work

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

Answers (2)

Subrahmanya V
Subrahmanya V

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

ng-hobby
ng-hobby

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

Related Questions