Geek Answers Handbook

Highlight a list of selected PrimeNG items

I am just trying to link data from a drop down menu with ngModel. I get an error while loading the application.

browser_adapter.js:84 EXCEPTION: No value accessor for ''

This makes me think that the error is due to the fact that ngModelit is not initially associated with any data when the application loads.

I'm not the best to use Observables ... so be careful.

Partial html dropdown

<p-dropdown [options]="actionsToTake" (onChange)="onToggleCreateActionInput()" 
  [(ngModel)]="action"></p-dropdown>

Relevant TypeScript (import excluded)

export class ActionView {
  public actionsToTake: SelectItem[] = [];
  public action: Action = new Action();

  constructor (private actionCreateService: ActionCreateService) {
    // populate dropdown list (actionsToTake) with data from service call
    this.actionCreateService.getActionFields().subscribe((resp) => {
      for (let i = 0; i < resp.data.data.actionElm.length; i++) {
        this.actionsToTake.push({label: resp.data.data.actionElm[i].name,
          value: resp.data.data.actionElm[i].name});
      }
    });
  }

  public onToggleCreateActionInput = (action): void => {
    // test if something in "action" exists, and then do something based on that
  };
}

, , action . , , ngModel, , , , . , , , .

+4
2

, - Angular Angular. PrimeNG, :

import {disableDeprecatedForms, provideForms} from '@angular/forms';

bootstrap(App, [
  disableDeprecatedForms(),
  provideForms()
]);

, , :

import {NgForm, FORM_DIRECTIVES, CORE_DIRECTIVES} from '@angular/common';


import {NgForm, FORM_DIRECTIVES, NgModel} from '@angular/forms';
import {CORE_DIRECTIVES} from '@angular/common';

. [ngModelOptions]="{standalone: true}" , [(ngModel)]. , :

<p-dropdown [(ngModel)]="actions" [ngModelOptions]="{standalone: true}"></p-dropdown>
+1

, , , , , .

import {bootstrap} from '@angular/platform-browser-dynamic';
import {provide} from '@angular/core';
import {AppComponent} from './app.component'
import {disableDeprecatedForms, provideForms} from '@angular/forms';

bootstrap(AppComponent, [
  disableDeprecatedForms(),
  provideForms(),
]);

https://github.com/primefaces/primeng/issues/549#issuecomment-230305403

http://forum.primefaces.org/viewtopic.php?f=35&t=46115&p=144059&hilit=no+value+accessor+for#p144059

!

Access Item Accessor , . , toggle, ng.

:

import {Component,Input, Provider, forwardRef} from '@angular/core'
import {ControlValueAccessor, NG_VALUE_ACCESSOR, CORE_DIRECTIVES} from '@angular/common';

import {ToggleButton} from 'primeng/primeng'

const noop = () => {};

const CUSTOM_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {
        useExisting: forwardRef(() => CustomToggle),
        multi: true
    });

@Component({
    selector: 'custom-toggle',
    template: `<span>
                  <p-toggleButton
                     [(ngModel)]="value"   >
                  </p-toggleButton>
               </span>`,
    directives: [CORE_DIRECTIVES,ToggleButton],
    providers: [CUSTOM_VALUE_ACCESSOR]
})

export class CustomToggle implements ControlValueAccessor {           
           
    private _value: string;
    
    private _onTouchedCallback: (_:any) => void = noop;
    private _onChangeCallback: (_:any) => void = noop;
    
    get value(): any { return this._value};
    
    set value(v: any) {
        if (v !== this._value) {
            this._value = v;
            this._onChangeCallback(v);
        }
    }
    
    onTouched() {
        this._onChangeCallback;
    }
    
    writeValue(value: any) {
        this._value = value;
    }
    
    registerOnChange(fn: any) {
        this._onChangeCallback = fn;
    }
    
    registerOnTouched(fn: any) {
        this._onTouchedCallback = fn;
    }
    
}
Hide result

<custom-toggle [(ngModel)]="myToggle"  ></custom-toggle>

myToggle - .

, : http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

+1

More articles:


All Articles