ОШИБКА Ошибка: нет средства доступа к значению для элемента управления формы с неопределенным атрибутом имени на переключателе

96

Вот мой компонент в 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)

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

Сью
источник
Это, вероятно, может вам помочь: stackoverflow.com/questions/46708080/…
Dinistro,

Ответы:

137

Я исправил эту ошибку, добавив name="fieldName" ngDefaultControlатрибуты к элементу, несущему [(ngModel)]атрибут.

Пьер-Алексис Чавальдини
источник
33
Некоторое дополнительное объяснение сделало бы это лучшим ответом. ngDefaultControlНапример, где вы нашли документацию ?
isherwood
9
Думаю name="fieldname"не нужно, но ngDefaultControlпроблему решает.
michaeak
3
Больше объяснений здесь. stackoverflow.com/questions/46465891/…
Я нидхин
Добавление «ngDefaultControl» (в атрибут с директивой * ngFor) решило мою аналогичную проблему.
Дэвидсон Лима,
85

У меня была такая же проблема, и проблема заключалась в том, что у моего дочернего компонента было @inputимя formControl.

Так что мне просто нужно было сменить:

<my-component [formControl]="formControl"><my-component/>

кому:

<my-component [control]="control"><my-component/>

ts:

@Input()
control:FormControl;
Эдуардо Варгас
источник
14
Огромная спасательница! Спасибо, этого очень сложно отследить.
H Dog
4
Столкнулся с той же самой проблемой
Ахмад Бакташ Хайери
1
Была такая же проблема! потратил около 1 часа, прежде чем поискать в Google и найти ответ. спасибо
wmehanna
1
Ничего себе, это решение заняло слишком много времени - спасибо, что так ясно
изложили его
Работает с Angular 10, как сказано в предыдущем комментарии, это действительно сложно отследить, однако впоследствии имеет смысл, что «formControl» не следует использовать в качестве имени свойства @Input компонента из-за потенциального конфликта пространства имен. , другое решение для именования может заключаться в переименовании поля _formControl, которое подается экземпляром FormControl.
Томас
41

Я также получил эту ошибку при написании компонента управления настраиваемой формой в Angular 7. Однако ни один из ответов не применим к Angular 7.

В моем случае к @Componentдекоратору нужно было добавить следующее :

  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCustomComponent),  // replace name as appropriate
      multi: true
    }
  ]

Это случай «я не знаю, почему это работает, но работает». Списывайте это на плохой дизайн / реализацию со стороны Angular.

Майер
источник
6
Этот фрагмент сообщает слою внедрения зависимостей Angular, что ваш класс должен быть возвращен, когда другие классы (т.е. директива formControlName) запрашивают у него токен NG_VALUE_ACCESSOR. Без него angular не смог бы узнать, что ваш класс является настраиваемым элементом управления (вся информация об интерфейсах и т. Д. Удаляется во время транспиляции)
Макс Мамфорд
18

У меня тоже была такая же ошибка, угловая 7

 <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  class="dropdown-item fontstyle"
     *ngFor="let city of Cities; let i = index">
      {{city.name}}
 </button>

Я только что добавил ngDefaultControl

   <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  ngDefaultControl class="dropdown-item fontstyle"
 *ngFor="let city of Cities; let i = index">
  {{city.name}}

Надим Касми
источник
Спасибо, что спасли мою жизнь!
Варун Кумар
7

У меня была такая же ошибка - я случайно привязал [(ngModel)] к моему mat-form-fieldвместо inputэлемента.

Крис Фремген
источник
Была такая же проблема
Дамит
6

Я получал это сообщение об ошибке в своих модульных тестах с Jasmine. Я добавил атрибут ngDefaultControl к настраиваемому элементу (в моем случае это был переключатель слайда материала angular), и это устраняет ошибку.

<mat-slide-toggle formControlName="extraCheese">
  Extra Cheese
</mat-slide-toggle>

Измените указанный выше элемент, чтобы включить атрибут ngDefaultControl.

<mat-slide-toggle ngDefaultControl formControlName="extraCheese">
 Extra Cheese
</mat-slide-toggle>
Судхаршан
источник
5

В моем случае я вставил [(ngModel)] на этикетку, а не на ввод. Также есть предостережение, я попытался запустить после правильно указанной выше ошибки в указанной строке, но ошибка не исчезла. Если есть другие места, где вы совершили ту же ошибку, он все равно выдает ту же ошибку в той же строке

Нишантх Субраманья
источник
1
Это хороший ответ. Некоторые компоненты (select, radio и т. Д.) Вы можете ошибиться и воткнуть ngModel не в то место, как это. Сообщение об ошибке мало помогает.
AndrewBenjamin
5

Я столкнулся с этой ошибкой при запуске кейсов Karma Unit Test. Добавление MatSelectModule в импорт устраняет проблему.

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],
Дэн Патил
источник
Только если у вас установлен «Angular Material», иначе он вам не понадобится.
Mikefox2k
3

Это немного глупо, но я получил это сообщение об ошибке, случайно используя [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: ''
    })
  }
}
Тревор
источник
Это было и для меня !! Так тонко, потому что документы дали мне код, с которым я работаю.
Санкофа,
2

В моем случае я использовал директиву, но не импортировал ее в свой файл module.ts. Импорт исправил это.

Андрис
источник
Спасибо, но мне также потребовалось перезапустить, ng serveчтобы обновить импорт
FindOutIslamNow,
2

У меня была такая же ошибка, у меня было поле ввода с именем controlв моем пользовательском компоненте формы, но я случайно передавал управление в поле ввода с именем formControl. Надеюсь, никто не столкнется с этой проблемой.

Нихил Арора
источник
2

В моем случае это было так же глупо, как зарегистрировать новый компонент для DI в моих app.module.tsобъявлениях, но не в экспорте.

Wikooo
источник
1

В моем случае это происходит в моем общем модуле, и мне пришлось добавить в @NgModule следующее:

...
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule
  ],
...

Потратил много часов, чтобы заставить его работать. Надеюсь, это поможет некоторым другим бороться с такой ошибкой.

Пей
источник
0

У меня была такая же ошибка, но в моем случае, очевидно, это была проблема синхронизации в момент рендеринга компонентов html.

Я следовал некоторым решениям, предложенным на этой странице, но любое из них сработало для меня, по крайней мере, не полностью.

Что действительно решило мою ошибку, так это написать приведенный ниже фрагмент кода внутри родительского тега html элементов.

Я привязался к переменной.

Код:

    *ngIf="variable-name"

Ошибка была вызвана, по-видимому, попыткой проекта отобразить страницу, очевидно, в момент оценки переменной проект просто не мог найти ее значение. С помощью приведенного выше фрагмента кода вы убедитесь, что перед рендерингом страницы вы спрашиваете, инициализировалась ли переменная.

Это мой код component.ts:

import { Component, OnInit } from '@angular/core';
import { InvitationService } from 'src/app/service/invitation.service';
import { BusinessService } from 'src/app/service/business.service';
import { Invitation } from 'src/app/_models/invitation';
import { forEach } from '@angular/router/src/utils/collection';

@Component({
  selector: 'app-invitation-details',
  templateUrl: './invitation-details.component.html',
  styleUrls: ['./invitation-details.component.scss']
})
export class InvitationDetailsComponent implements OnInit {
  invitationsList: any;
  currentInvitation: any;
  business: any;
  invitationId: number;
  invitation: Invitation;

  constructor(private InvitationService: InvitationService, private BusinessService: 
BusinessService) { 
this.invitationId = 1; //prueba temporal con invitacion 1
this.getInvitations();
this.getInvitationById(this.invitationId);
  }

   ngOnInit() {

  }

  getInvitations() {
    this.InvitationService.getAllInvitation().subscribe(result => {
      this.invitationsList = result;
      console.log(result);
    }, error => {
      console.log(JSON.stringify(error));
    });
  }

  getInvitationById(invitationId:number){
    this.InvitationService.getInvitationById(invitationId).subscribe(result => {
      this.currentInvitation = result;
      console.log(result);
      //this.business=this.currentInvitation['business'];
       //console.log(this.currentInvitation['business']); 
     }, error => {
     console.log(JSON.stringify(error));
    });
  }
      ...

Вот моя разметка html:

<div class="container-fluid mt--7">
  <div class="row">
    <div class="container col-xl-10 col-lg-8">
      <div class="card card-stats ">
        <div class="card-body container-fluid form-check-inline" 
         *ngIf="currentInvitation">
          <div class="col-4">
             ...

Надеюсь, это может быть полезно.

NUKE
источник
эта ссылка имеет аналогичную проблему :, stackoverflow.com/q/49409674/8992452 возможно, это может помочь с проблемой
NUKE
0

Вы пытались переместить [(ngModel)]в divвместо switchHTML? В моем коде была такая же ошибка, потому что я привязал модель к a, <mat-option>а не к <mat-select>. Хотя я не использую контроль формы.

Mneumann
источник
0

В моем случае это был компонент component.member, которого не было, например

[formControl]="personId"

Добавление его в объявление класса исправило его

this.personId = new FormControl(...)
Стефан Мичев
источник
0

В моем случае ошибка была вызвана дублированием импорта компонента в модуль.

Алекс Грюнвальд
источник
0

#Задний план

  • NativeScript 6.0

В моем случае ошибка была вызвана изменением тега элемента с на по ошибке. Внутри <TextView an [(ngModel)] = "name". был определен.

После удаления [(ngModel)] = "name" ошибка исчезла.

Крис С
источник
-1

в моем случае у меня был <TEXTAREA>тег из старого html при преобразовании в angular. Пришлось сменить на <textarea>.

Фэн Чжан
источник
Я не голосовал против, но это НИКОГДА не должно быть причиной.
FindOutIslamNow,