Unable to get the Angular Formly select option to bind

Question

Unable to get the Angular Formly select option to bind

I'm currently working on binding formly select type options with the following code:

      fieldGroup: [
    {
      key: 'TimeOffTypeID',
      type: 'select',
      className: 'flex-40 padding-10',
      templateOptions: {
        label: 'نوع مرخصی',
        placeholder: 'نوع مرخصی',
        required: true,
        options: this.getTimeoffType,
        valueProp: 'TimeOffTypeID',
        labelProp: 'TimeOffTypeName',
      },

Additionally,

    types$: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
     
    public get getTimeoffType(): Observable<any[]> {

    return this.types$.asObservable();
    }

and with DataService to retrieve data

      getTimeoffTypes() {

this.base
  .get(
    Controller.TIMEOFFTYPE,
    {
      TimeOffTypeID: 0,
    },
    Actions.SEARCH
  )
  .subscribe(({ result }) => {
    console.log(result)
    this.types$.next(result);
    
  })

}

The data retrieved seems correct, however it's not being bound to the form select options.

angular typescript behaviorsubject angular-formly

Answer 1

Answer №1

Dealing with the same issue, I couldn't see the options. By tweaking the code below, I managed to solve it: templateOptions : { label : "Gender.", labelProp : "name", valueProp : "value", options : [ { "name" : "Male", "value" : "male" }, { "name" : "Female", "value" : "female" }, { "name" : "Others", "value" : "others" } ], Note: I am utilizing Formly Material

Answer 2

Dealing with the same issue, I couldn't see the options. By tweaking the code below, I managed to solve it: templateOptions : { label : "Gender.", labelProp : "name", valueProp : "value", options : [ { "name" : "Male", "value" : "male" }, { "name" : "Female", "value" : "female" }, { "name" : "Others", "value" : "others" } ], Note: I am utilizing Formly Material

Answer 3

Answer №2

Check out the code snippet below for a similar implementation:

data.service.ts

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
    private data$ = new Subject<any>();

    sendData(value: any) {
        this.data$.next({ info: value });
    }

    clearData() {
        this.data$.next();
    }

    getData(): Observable<any[]> {
        return this.data$.asObservable();
    }
}

app.page.ts

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { DataService } from './_services/index';

@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnDestroy {
    dataValues: any[] = [];
    subscription: Subscription;

    constructor(private dataService: DataService) {
        // subscribe to component messages
        this.subscription = this.dataService.getData().subscribe( msg => {
          if (msg) {
            this.dataValues.push(msg);
          } else {
            // clear values on empty message
            this.dataValues = [];
          }
        });
    }

    ngOnDestroy() {
        // unsubscribe to avoid memory leaks
        this.subscription.unsubscribe();
    }
}

Answer 4

Check out the code snippet below for a similar implementation:

data.service.ts

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
    private data$ = new Subject<any>();

    sendData(value: any) {
        this.data$.next({ info: value });
    }

    clearData() {
        this.data$.next();
    }

    getData(): Observable<any[]> {
        return this.data$.asObservable();
    }
}

app.page.ts

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { DataService } from './_services/index';

@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnDestroy {
    dataValues: any[] = [];
    subscription: Subscription;

    constructor(private dataService: DataService) {
        // subscribe to component messages
        this.subscription = this.dataService.getData().subscribe( msg => {
          if (msg) {
            this.dataValues.push(msg);
          } else {
            // clear values on empty message
            this.dataValues = [];
          }
        });
    }

    ngOnDestroy() {
        // unsubscribe to avoid memory leaks
        this.subscription.unsubscribe();
    }
}

Unable to get the Angular Formly select option to bind

Answer №1

Answer №2

Similar questions

Trigger Angular Animation when there is a modification in the DOM element's appearance or styling

What is the best way to trigger a function in React when a constant value is updated?

Enhance your map by incorporating an overlay with ngx-openlayers

Adapt button functionality according to selected dropdown value in Angular

After sending an HTTP Post request in Angular 5, users are required to click in order

Angular2 - Issue with calling toPromise() method on this.http.get() function, as it is not recognized

The property '.....' is missing an initializer and has not been explicitly assigned in the constructor

Exploring how to iterate through multiple arrays simultaneously in JavaScript

Adding a blank line in an Angular table using primeNG to display database information requires a specific method

What causes the cursor in an editable div to automatically move to the front of the div?

Installing a 3rd party plugin in Angular using the Angular-cli tool

Validating Form Controls with Dynamic Names in Angular 5

What is the best way to transfer information between sibling child components under the same parent in Angular 4?

What are the steps to publish an Electron application for Windows, Mac, or Linux operating systems?

What is the proper way to utilize a custom property that has been incorporated into my Pinia stores in a Typescript project?

Using Rails 5 API to generate a new object using JSON with nested resources

Having trouble with obtaining real-time text translation using ngx translate/core in Angular 2 with Typescript

Angular component name constraints - 'the selector [your component name] is not permissible'

ag-grid angular - update group row when selection changes

When you click, you will be directed to the specific details of the object