property - ng-model angularjs

ngModel: ningún valor de acceso para ''''

Question

Estoy creando un elemento personalizado en Angular 2.0 ( <my-select> ), y cuando incluyo el atributo ngModel en el componente, inmediatamente recibo el siguiente error:

EXCEPTION: No value accessor for '''' in [myModel in App@0:195]

Aquí hay un plunker: http://plnkr.co/edit/wlkPWcB92YZASCwCnmcw?p=preview

(Abra la consola para ver el error)

Si simplemente comenta la siguiente línea desde src/app.ts , el componente se procesará adecuadamente:

''[ngModel]="myModel"''

He hecho lo siguiente:

1. Importado {FORM_DIRECTIVES} de ''angular2/common''
2. FORM_DIRECTIVES incluidos en la parte de directives de @Component
3. Inicializado myModel

¿Que me estoy perdiendo aqui?

Answer 1

Acabo de recibir este error también. Y fue mi estupidez. Lo describiré aquí en caso de que alguien más salte en él.

El formato de enlace de 2 vías para pasar variables entre componentes (digamos que quiero pasar obj llamado myObj de Componente A a Componente B).

Así que dentro de la plantilla para el componente AI tendría algo como

<componentB [(myObjectInB)]="myObjectInA"></componentB>

Dentro del componente B, tengo que tener un objeto llamado myObjectInB y la forma en que lo declaramos debe ser:

@Input() myObjectInB ...

El @Input () aquí es lo que me perdí, así que por eso se produjo ese error.

Answer 2

Creo que deberías usar algo más que ngModel para el parámetro de tu componente my-select ... Porque ya lo usa Angular2.

Hice una prueba con el model y parece mejor ... Ya no tengo el error.

Editar

Si desea manejar ngModel al nivel de su componente my-select , puede consultar este enlace: https://github.com/angular/angular/issues/2543 .

Si desea implementar un componente compatible con ngModel, puede echar un vistazo a los siguientes enlaces:

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/ . Ver sección: componente compatible con NgModel
• Entrada de forma personalizada Angular 2

Espero te ayude, Thierry

Answer 3

En mi caso fue un simple error tipográfico. El selector del componente era ''mi-componente'' pero en el html <my-compoent> . ¿Notar las últimas tres letras? Se compila bien y, a continuación, aparece este error "sin acceso al valor" en el tiempo de ejecución.

Desde mi experiencia, puedes tener otros errores bastante extraños debido a errores tipográficos aquí y allá. El compilador mecanografiado no se preocupa por el marcado.

Answer 4

No estaba usando las nuevas API de formularios, y aún recibía este error para NgModel en mi prueba de unidad.

Parece que no basta con especificar NgModel en su componente. p.ej

antes de
directives:[NgModel]

Después
directives:[FORM_DIRECTIVES]

Eso solucionó mi problema. Saludos :)

Answer 5

Prueba esto

import {FORM_DIRECTIVES} from ''@angular/forms'';

Importe todos y cada uno de los símbolos de formas - NgForm, Validadores, etc. - desde @ angular / forms. Importándolos de @ angular / common resultará en un error No se encontró el acceso al valor de acceso.

Answer 6

Tengo el mismo problema. Pensé que intenté unir mi variable a un elemento <span> y luego obtener ese valor en un atributo:

<span [(ngModel)]="_hidden" [hidden]="_hidden" class="field-validation-error">Username is required.</span>

Como puede ver, no hay forma de que la vista modifique la variable _hidden en el modelo. Arreglando la encuadernación a una vía trabajada:

<span (ngModel)="_hidden" [hidden]="_hidden" class="field-validation-error">Username is required.</span>

Observe el cambio de [(ngModel)] a (ngModel) .

Answer 7

Tomo este error por 2 razones:

1) El componente debe adjuntarse como un valorador de acceso , como:

@Component({
selector: ''ace-editor'',
template: `<div class="ng2-ace-editor"></div>`,
})
export class AceEditor implements OnInit, ControlValueAccessor {
constructor(private element: ElementRef, @Optional() ngControl: NgControl) {
if (ngControl) {
ngControl.valueAccessor = this;
}
}

2) No tienes que mezclar formularios desaprobados y nuevos . Si usa una nueva API, agregue a su main.ts :

import { bootstrap } from ''@angular/platform-browser-dynamic'';
import { disableDeprecatedForms, provideForms } from ''@angular/forms'';
import { AppComponent } from ''./app.component'';
bootstrap(AppComponent, [
disableDeprecatedForms(),
provideForms()
])
.catch((err: any) => console.error(err));

Answer 8

Tuve un problema similar cuando estaba creando una tarea de lanzamiento en trago. Lo localicé hasta un error con las versiones minificadas del código Angular2, que es lo que estás usando en tu plunker. Este problema Angular2 en github es donde encontré mi respuesta y aquí está la respuesta de Igor Minar al problema (Igor es uno de los principales contribuyentes al proyecto Angular2).

TL; DR; Use los archivos de la biblioteca .dev Angular2 hasta que el equipo de Angular solucione este problema.

Answer 9

> = RC.5

@NgModule({
imports: [BrowserModule, FormsModule, ReativeFormsModule],

FormsModule y / o ReativeFormsModule dependiendo de si utiliza formularios controlados por plantillas, formularios controlados por modelos o ambos

Ver también

• https://angular.io/docs/ts/latest/guide/forms.html
• https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
• http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

Answer 10

La respuesta de @ DenisKolodin menciona la configuración del elemento de acceso usando ngControl.valueAccessor = this; . Sin embargo, algunos artículos sugieren que se registre al proveedor de esta manera:

@Component({
selector: ''...'',
template: ''...'',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyComponent ),
multi: true,
}
})
export class MyComponent implements ControlValueAccessor{ ...

Así es como se hace en la fuente DefaultValueAccessor de Angular