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

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

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

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

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

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

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

кому:

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

ts:

@Input()
control:FormControl;

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

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

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

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

У меня тоже была такая же ошибка, угловая 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}}

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

Я получал это сообщение об ошибке в своих модульных тестах с 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>

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

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

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],

Это немного глупо, но я получил это сообщение об ошибке, случайно используя [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. Импорт исправил это.

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

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

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

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

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

У меня была такая же ошибка, но в моем случае, очевидно, это была проблема синхронизации в момент рендеринга компонентов 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">
             ...

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

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

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

[formControl]="personId"

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

this.personId = new FormControl(...)

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

#Задний план

• NativeScript 6.0

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

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

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