otro - pasar parametros entre componentes angular 4

Angular4: sin valor de acceso para el control de formulario

Question

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?

Answer 1

Creo que debe usar formControlName="surveyType" en una input y no en un div

Answer 2

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.

Recursos

• Controles de formularios personalizados en angular por Thoughtram
• Controles angulares de formularios personalizados con formularios reactivos y NgMode por Cory Rylan