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
Что мне здесь не хватает?
Ответы
Ответ 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