otro - pasar parametros entre componentes angular 4
Angular4: sin valor de acceso para el control de formulario (2)
Creo que debe usar
formControlName="surveyType"
en una
input
y no en un
div
Tengo un elemento personalizado:
<div formControlName="surveyType">
<div *ngFor="let type of surveyTypes"
(click)="onSelectType(type)"
[class.selected]="type === selectedType">
<md-icon>{{ type.icon }}</md-icon>
<span>{{ type.description }}</span>
</div>
</div>
Cuando trato de agregar el formControlName, recibo un mensaje de error:
Error de ERROR: sin valor de acceso para el control de formulario con el nombre: ''surveyType''
Traté de agregar
ngDefaultControl
sin éxito.
Parece que es porque no hay entrada / selección ... y no sé qué hacer.
Me gustaría vincular mi clic a este formularioControl para que cuando alguien haga clic en toda la tarjeta que empuje mi ''tipo'' en el formularioControl. ¿Es posible?
Puede usar
formControlName
solo en directivas que implementan
ControlValueAccessor
.
Implementar la interfaz
Entonces, para hacer lo que desea, debe crear un componente que implemente
ControlValueAccessor
, lo que significa
implementar las siguientes tres funciones
:
-
writeValue(le dice a Angular cómo escribir el valor del modelo a la vista) -
registerOnChange(registra una función de controlador que se llama cuando cambia la vista) -
registerOnTouched(registra un controlador que se llamará cuando el componente recibe un evento táctil, útil para saber si el componente se ha enfocado).
Registrar un proveedor
Luego, debe decirle a Angular que esta directiva es un
ControlValueAccessor
(la interfaz no lo cortará, ya que se elimina del código cuando TypeScript se compila en JavaScript).
Para ello, debe
registrar un proveedor
.
El proveedor debe proporcionar
NG_VALUE_ACCESSOR
y
usar un valor existente
.
También necesitarás un
forwardRef
aquí.
Tenga en cuenta que
NG_VALUE_ACCESSOR
debe ser un
proveedor múltiple
.
Por ejemplo, si su directiva personalizada se llama MyControlComponent, debe agregar algo en las siguientes líneas dentro del objeto pasado al decorador
@Component
:
ERROR Error: No value accessor for form control with name: ''surveyType''
Uso
Su componente está listo para ser utilizado.
Con
los formularios basados en plantillas
, el enlace
ngModel
ahora funcionará correctamente.
Con
formularios reactivos
, ahora puede usar adecuadamente
formControlName
y el control de formulario se comportará como se esperaba.