Вот мой компонент в Angular 4:
@Component( {
selector: 'input-extra-field',
template: `
<div class="form-group" [formGroup]="formGroup" >
<switch [attr.title]="field.etiquette"
[attr.value]="field.valeur" [(ngModel)]="field.valeur"
[formControl]="fieldControl" [attr.id]="name" [attr.disabled]="disabled">
</switch>
<error-messages [control]="name"></error-messages>
</div>
`
} )
Вот мой класс:
export class SwitchExtraField extends ExtraField {
@Input() field: ExtraFormField;
@Input() entity: { fields: Object };
@Input() formGroup: FormGroup;
constructor( formDir: NgForm ) {
super( null, null, formDir );
}
get disabled(): string {
if ( this.field && !!this.field.saisissable && !this.field.saisissable ) {
return 'disabled';
}
return null;
}
}
Это ошибка, которую я получаю при компиляции:
ERROR Error: No value accessor for form control with unspecified name attribute
at _throwError (forms.es5.js:1918)
at setUpControl (forms.es5.js:1828)
at FormControlDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617)
Когда я меняю переключатель элемента на ввод, он работает, зная, что я использую ту же структуру для других компонентов, и она работает нормально.
ControlValueAccessor
- Никогда больше не путайте при реализации ControlValueAccessor в формах AngularОтветы:
Я исправил эту ошибку, добавив
name="fieldName" ngDefaultControl
атрибуты к элементу, несущему[(ngModel)]
атрибут.источник
ngDefaultControl
Например, где вы нашли документацию ?name="fieldname"
не нужно, ноngDefaultControl
проблему решает.У меня была такая же проблема, и проблема заключалась в том, что у моего дочернего компонента было
@input
имяformControl
.Так что мне просто нужно было сменить:
кому:
ts:
источник
Я также получил эту ошибку при написании компонента управления настраиваемой формой в Angular 7. Однако ни один из ответов не применим к Angular 7.
В моем случае к
@Component
декоратору нужно было добавить следующее :Это случай «я не знаю, почему это работает, но работает». Списывайте это на плохой дизайн / реализацию со стороны Angular.
источник
У меня тоже была такая же ошибка, угловая 7
Я только что добавил ngDefaultControl
источник
У меня была такая же ошибка - я случайно привязал [(ngModel)] к моему
mat-form-field
вместоinput
элемента.источник
Я получал это сообщение об ошибке в своих модульных тестах с Jasmine. Я добавил атрибут ngDefaultControl к настраиваемому элементу (в моем случае это был переключатель слайда материала angular), и это устраняет ошибку.
Измените указанный выше элемент, чтобы включить атрибут ngDefaultControl.
источник
В моем случае я вставил [(ngModel)] на этикетку, а не на ввод. Также есть предостережение, я попытался запустить после правильно указанной выше ошибки в указанной строке, но ошибка не исчезла. Если есть другие места, где вы совершили ту же ошибку, он все равно выдает ту же ошибку в той же строке
источник
Я столкнулся с этой ошибкой при запуске кейсов Karma Unit Test. Добавление MatSelectModule в импорт устраняет проблему.
источник
Это немного глупо, но я получил это сообщение об ошибке, случайно используя
[formControl]
вместо[formGroup]
. Глянь сюда:НЕПРАВИЛЬНО
@Component({ selector: 'app-application-purpose', template: ` <div [formControl]="formGroup"> <!-- '[formControl]' IS THE WRONG ATTRIBUTE --> <input formControlName="formGroupProperty" /> </div> ` }) export class MyComponent implements OnInit { formGroup: FormGroup constructor( private formBuilder: FormBuilder ) { } ngOnInit() { this.formGroup = this.formBuilder.group({ formGroupProperty: '' }) } }
ВЕРНО
@Component({ selector: 'app-application-purpose', template: ` <div [formGroup]="formGroup"> <!-- '[formGroup]' IS THE RIGHT ATTRIBUTE --> <input formControlName="formGroupProperty" /> </div> ` }) export class MyComponent implements OnInit { formGroup: FormGroup constructor( private formBuilder: FormBuilder ) { } ngOnInit() { this.formGroup = this.formBuilder.group({ formGroupProperty: '' }) } }
источник
В моем случае я использовал директиву, но не импортировал ее в свой файл module.ts. Импорт исправил это.
источник
ng serve
чтобы обновить импортУ меня была такая же ошибка, у меня было поле ввода с именем
control
в моем пользовательском компоненте формы, но я случайно передавал управление в поле ввода с именемformControl
. Надеюсь, никто не столкнется с этой проблемой.источник
В моем случае это было так же глупо, как зарегистрировать новый компонент для DI в моих
app.module.ts
объявлениях, но не в экспорте.источник
В моем случае это происходит в моем общем модуле, и мне пришлось добавить в @NgModule следующее:
Потратил много часов, чтобы заставить его работать. Надеюсь, это поможет некоторым другим бороться с такой ошибкой.
источник
У меня была такая же ошибка, но в моем случае, очевидно, это была проблема синхронизации в момент рендеринга компонентов html.
Я следовал некоторым решениям, предложенным на этой странице, но любое из них сработало для меня, по крайней мере, не полностью.
Что действительно решило мою ошибку, так это написать приведенный ниже фрагмент кода внутри родительского тега html элементов.
Я привязался к переменной.
Код:
Ошибка была вызвана, по-видимому, попыткой проекта отобразить страницу, очевидно, в момент оценки переменной проект просто не мог найти ее значение. С помощью приведенного выше фрагмента кода вы убедитесь, что перед рендерингом страницы вы спрашиваете, инициализировалась ли переменная.
Это мой код component.ts:
Вот моя разметка html:
Надеюсь, это может быть полезно.
источник
Вы пытались переместить
[(ngModel)]
вdiv
вместоswitch
HTML? В моем коде была такая же ошибка, потому что я привязал модель к a,<mat-option>
а не к<mat-select>
. Хотя я не использую контроль формы.источник
В моем случае это был компонент component.member, которого не было, например
Добавление его в объявление класса исправило его
источник
В моем случае ошибка была вызвана дублированием импорта компонента в модуль.
источник
#Задний план
В моем случае ошибка была вызвана изменением тега элемента с на по ошибке. Внутри <TextView an [(ngModel)] = "name". был определен.
После удаления [(ngModel)] = "name" ошибка исчезла.
источник
в моем случае у меня был
<TEXTAREA>
тег из старого html при преобразовании в angular. Пришлось сменить на<textarea>
.источник