Tengo un componente de entrada personalizado simple como este,
import {Component, Provider, forwardRef} from "@angular/core";
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
const noop = () => {};
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
};
@Component({
selector: 'custom-input',
template: `
<input class="form-control"
[(ngModel)]="value" name="somename"
(blur)="onTouched()">
`,
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInputComponent implements ControlValueAccessor{
//The internal data model
private _value: any = '';
//Placeholders for the callbacks
private _onTouchedCallback: () => void = noop;
private _onChangeCallback: (_:any) => void = noop;
//get accessor
get value(): any { return this._value; };
//set accessor including call the onchange callback
set value(v: any) {
if (v !== this._value) {
this._value = v;
this._onChangeCallback(v);
}
}
//Set touched on blur
onTouched(){
this._onTouchedCallback();
}
//From ControlValueAccessor interface
writeValue(value: any) {
this._value = value;
}
//From ControlValueAccessor interface
registerOnChange(fn: any) {
this._onChangeCallback = fn;
}
//From ControlValueAccessor interface
registerOnTouched(fn: any) {
this._onTouchedCallback = fn;
}
}
y tengo un módulo de aplicación como este,
/**
* Created by amare on 8/15/16.
*/
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AppComponent } from './app/app.component';
import {CustomInputComponent} from "./app/shared/custom.input.component";
import {RouterModule} from "@angular/router";
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule, FormsModule, RouterModule ],
declarations: [ AppComponent, CustomInputComponent],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
y principal
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
y he usado mi entrada personalizada en uno de mis componentes como se muestra a continuación, pero obtengo 'Sin valor de acceso para control de formulario con atributo de nombre no especificado'.
<custom-input name="firstName" [(ngModel)]="firstName"></custom-input>
y el componente de la aplicación se ve así
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
firstName: string;
}
ngDefaultControl
a su control, así:<custom-input name="firstName" [(ngModel)]="firstName" ngDefaultControl></custom-input>
FORM_DIRECTIVES
, ¡romperá su aplicación! Caso en cuestión: github.com/valor-software/ng2-charts/issues/352Respuestas:
agregar ngDefaultControl al componente de entrada personalizado en el host resolvió el problema, gracias @danieleds
fuente
input
y también intenté agregarlongDefaultControl
a la entrada y no funcionó. Todavía me dio el mismo error. En RC5ngDefaultControl
funciona: stackoverflow.com/a/46465959/968003 . Esencialmente, agrega defaultControlValueAccessor
, que actúa como un puente entre la API de formas angulares y un elemento nativo en el DOM.Agregue ngDefaultControl al componente de entrada personalizada. Esto agrega enlace de datos bidireccional, no debería tener que implementar los métodos de acceso al valor a menos que esté haciendo algo único.
fuente
Agregue
ngDefaultControl
a su entrada. p.ejEntonces
import { FORM_DIRECTIVES } from '@angular/common'
;Finalmente directivas:
[FORM_DIRECTIVES]
Esto funcionará :) Gracias por los comentarios anteriores
fuente
markdown
comandos para que su publicación sea más legible.FORM_DIRECTIVES
en@angular/common
Estaba poniendo
[(ngModel)]
mi<option>
etiqueta en lugar de<select>
Así que sí ... eso causará esto.
fuente
Como otro escenario en el que surge esto, había
[(ngModel)]
especificado un componente personalizado que se reconstruyó y simplificó recientemente, y la nueva versión del componente solo teníangModel
como variable de entrada normal con emisiones.Esto no fue suficiente : se debe cambiar el nombre de la variable de entrada a algo más
ngModel
, o el componente debe implementar laControlValueAccessor
interfaz ( consulte los documentos para obtener más detalles ). Una vez que uno u otro esté completo, ya no obtendrá este error.fuente