Angular4-Sin valor accessor para control de formularios

Tengo un pequeño problema con mi forma.

Hice 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>

Trato de agregar el formControlName pero angular no quiere saber nada y solo dice: 

ERROR Error: No value accessor for form control with name: 'surveyType'

Intenté añadir ngDefaultControl sin éxito. Parece que es porque no hay entrada / selección... pero no sé qué hacer.

Me gustaría enlazar mi clic a este FormControl para que cuando alguien haga clic en toda la tarjeta que empuje mi 'tipo' en el FormControl. Es posible?

Author: Luca Ritossa, 2017-08-13
Source

2 answers

Puede usar formControlName solo en directivas que implementen ControlValueAccessor.

Implementar la interfaz

Así que, para hacer lo que quieras, tienes que 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 manejadora que se llama cuando cambia la vista)
  • registerOnTouched (registros un manejador que se llama cuando el componente recibe un evento táctil, útil para saber si el componente se ha enfocado).

Registrar un proveedor

Entonces, tienes que decirle a Angular que esta directiva es una ControlValueAccessor (la interfaz no va a cortarla ya que se elimina del código cuando TypeScript se compila a JavaScript). Para ello, registra un proveedor.

El proveedor debe proporcionar NG_VALUE_ACCESSOR y utilice un valor existente. También necesitará un forwardRef toma. 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 a lo largo de las siguientes líneas dentro del objeto pasado a @Component decorator: 

providers: [
  { 
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: forwardRef(() => MyControlComponent),
  }
]

Uso

Su componente está listo para ser utilizado. Con formularios basados en plantillas, ngModel la encuadernación ahora funcionará correctamente.

Con formas reactivas , ahora puede use formControlName y el control de formulario se comportará como se espera.

Recursos

 89
Author: Lazar Ljubenović,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-14 06:44:16

Creo que deberías usar formControlName="surveyType" en un input y no en un div

 19
Author: Vega,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-13 11:20:27