Подтвердить что ты не робот

NgModel: нет доступа к данным для ''

Я создаю пользовательский элемент в Angular 2.0 (<my-select>), и когда я включаю атрибут ngModel в компонент, я сразу же попадаю со следующей ошибкой:

EXCEPTION: No value accessor for '' in [myModel in [email protected]:195]

Здесь plunker: http://plnkr.co/edit/wlkPWcB92YZASCwCnmcw?p=preview

(Откройте консоль, чтобы просмотреть ошибку)

Если вы просто закомментируете следующую строку из src/app.ts, компонент будет выглядеть соответствующим образом:

'[ngModel]="myModel"'

Я сделал следующее:

  • Импортировано {FORM_DIRECTIVES} из 'angular2/common'
  • Включен FORM_DIRECTIVES в directives часть @Component
  • Инициализировано myModel

Что мне здесь не хватает?

4b9b3361

Ответ 1

Я думаю, вы должны использовать что-то еще, кроме ngModel для параметра вашего компонента my-select... потому что он уже используется Angular2.

Я сделал попытку с model, и мне кажется, что лучше... У меня больше нет ошибки.

Edit

Если вы хотите обработать ngModel на уровне вашего компонента my-select, вы можете посмотреть на эту ссылку: https://github.com/angular/angular/issues/2543.

Если вы хотите реализовать компонент, совместимый с ngModel, вы можете посмотреть на следующие ссылки:

Надеюсь, это поможет вам, Thierry

Ответ 2

Я принимаю эту ошибку для причин 2:

1) Компонент должен присоединяться к себе как к элементу доступа, например:

@Component({
  selector: 'ace-editor',
  template: `<div class="ng2-ace-editor"></div>`,
})

export class AceEditor implements OnInit, ControlValueAccessor {

  constructor(private element: ElementRef, @Optional() ngControl: NgControl) {
    if (ngControl) {
      ngControl.valueAccessor = this;
    }
  }

2) Вы не должны смешивать устаревшие и новые формы. Если вы используете новый API, добавьте в свой main.ts:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

import { AppComponent } from './app.component';

bootstrap(AppComponent, [
  disableDeprecatedForms(),
  provideForms()
])
.catch((err: any) => console.error(err));

Ответ 3

У меня такая же проблема. Я решил, что я попытался выполнить двухстороннюю привязку моей переменной к элементу <span>, а затем получить это значение в атрибуте:

<span [(ngModel)]="_hidden" [hidden]="_hidden" class="field-validation-error">Username is required.</span>

Как вы можете видеть, нет возможности для вида изменить переменную _hidden в модели. Фиксация привязки к односторонней работе:

<span (ngModel)="_hidden" [hidden]="_hidden" class="field-validation-error">Username is required.</span>

Обратите внимание на изменение с [(ngModel)] на (ngModel).

Ответ 4

Попробуйте это

import {FORM_DIRECTIVES} from '@angular/forms';

Импортировать любые символы всех форм - NgForm, Validators и т.д. - из @ angular/forms. Импортирование из @angular/common приведет к обнаружению ошибки атрибута No value.

Ответ 5

В моем случае это была простая ошибка опечатки. Селектор компонентов был "my-component", но в html я набрал <my-compoent>. Обратите внимание на последние три буквы? Компилируется просто отлично, и тогда у вас есть эта ошибка "нет значения доступа" во время выполнения.

Из моего опыта вы можете получить некоторые другие довольно странные ошибки из-за опечаток здесь и там. Typescript компилятор не заботится о разметке.

Ответ 6

У меня была аналогичная проблема, когда я создавал задачу выпуска в gulp. Я отследил его до ошибки с мини-версиями кода Angular2, который вы используете в своем плункере. Это Angular2 Проблема в github - это то, где я нашел свой ответ, и вот ответ Игоря Минара на Проблема (Игорь является ведущим участником проекта Angular2).

TL; DR; Используйте файлы библиотеки .dev Angular2, пока команда Angular не устранит эту проблему.

Ответ 7

Я не использовал новые API форм, и я все еще получал эту ошибку для NgModel в моем unit test.

Похоже, просто указать NgModel в вашем компоненте недостаточно. например

До
directives:[NgModel]

После
directives:[FORM_DIRECTIVES]

Это исправило мою проблему. Приветствия:)

Ответ 8

Я тоже получил эту ошибку. И это была моя глупость. Я опишу его здесь, если кто-то еще прыгнет в него.

Формат двухсторонней привязки для передачи переменных между компонентами (скажем, я хочу передать obj, называемый myObj из компонента A в компонент B).

Итак, внутри шаблона для компонента A у меня будет что-то вроде

<componentB [(myObjectInB)]="myObjectInA"></componentB>

Внутри компонента B, я должен иметь объект, называемый myObjectInB, и способ, которым мы его объявляем, должен быть:

@Input() myObjectInB ...

@Input() - это то, что я пропустил, так что почему он бросил эту ошибку.

Ответ 9

>= RC.5

@NgModule({
  imports: [BrowserModule, FormsModule, ReativeFormsModule],

FormsModule и/или ReativeFormsModule в зависимости от того, используете ли вы формы, управляемые шаблонами, формы, управляемые моделью, или оба

См. также

Ответ 10

@DenisKolodin answer упоминает установку аксессора с помощью ngControl.valueAccessor = this;. Однако некоторые статьи предлагают вместо этого зарегистрировать провайдера:

@Component({
  selector: '...',
  template: '...',
  providers: [
  {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyComponent ),
    multi: true,
  }      
})
export class MyComponent implements ControlValueAccessor{ ...

Вот как это делается в Angular DefaultValueAccessor source