Angular4 - никакой ценности не имеют доступа для контроля формы

у меня есть небольшая проблема с моей формой.

Я сделал пользовательский элемент:

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

Я пытаюсь добавить formControlName но угловой не хочу ничего знать и просто говорю:

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

Я попытался добавить ngDefaultControl без успеха. Кажется, это потому, что нет ввода/выбора... но я не знаю, что делать.

Я хотел бы привязать мой клик К этому formControl, чтобы, когда кто-то нажимает на всю карту, которая нажимает мой "тип" в formControl. Возможно ли это?

2 56
angularjs angular4-forms

2 ответа:

можно использовать formControlName только на директив, которые реализуют ControlValueAccessor.

реализует интерфейс

Итак, чтобы сделать то, что вы хотите, вы должны создать компонент, который реализует ControlValueAccessor, что означает реализация следующих трех функций:

  • writeValue (говорит угловой, как записать значение из модели в поле зрения)
  • registerOnChange (регистрирует функцию обработчика, которая вызывается при изменении вида)
  • registerOnTouched (регистрирует обработчик для вызова, когда компонент получает событие касания, полезное для определения того, был ли компонент сфокусирован).

Регистрация поставщика

затем, вы должны сказать Angular, что эта директива ControlValueAccessor (интерфейс не собирается вырезать его, так как он удаляется из кода при компиляции TypeScript в JavaScript). Вы делаете это с помощью Регистрация поставщика.

провайдер должен предоставить NG_VALUE_ACCESSOR и использовать существующее значение. Вам также понадобится forwardRef здесь. Обратите внимание, что NG_VALUE_ACCESSOR должно быть мульти-провайдера.

например, если ваша пользовательская директива называется MyControlComponent, вы должны добавить что-то в следующих строках внутри объекта, переданного в @Component оформитель:

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

использование

компонент готов к использованию. С шаблонные формы,ngModel привязка теперь будет работать должным образом.

С реактивные формы, теперь вы сможете правильно использовать formControlName и элемент управления формы будет вести себя так, как ожидалось.

ресурсы

89

Я думаю, что вы должны использовать formControlName="surveyType" на input и div

19