ERROR Ошибка: Нет аксессора значения для элемента управления формы с неопределенным атрибутом имени на переключателе

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

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

A-Sharabiani
Редактировал вопрос 7-го августа 2019 в 6:18
Программирование
angular form-control
26-го сентября 2017 в 8:59
43 просмотров
Комментарии к вопросу (2)
Решение

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

isherwood
Редактировал ответ 23-го января 2018 в 4:00
Комментарии (2)

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

Поэтому мне просто нужно было изменить:

на:

ц:

@Input()
control:FormControl;
Ahmad Baktash Hayeri
Редактировал ответ 1-го сентября 2019 в 7:08
Комментарии (3)

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

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

поставщики: [ { предлагаем: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MyCustomComponent), // заменить соответствующее имя мульти: правда } ]

Это тот случай, когда "Я не'т знаю, почему это работает, но это не так.&я списала это на плохой дизайн/реализации на угловой.

Комментарии (0)

Я тоже была такая же ошибка , угловой 7


      {{city.name}}

Я просто добавил ngDefaultControl


  {{city.name}}

< кнопка/>

Комментарии (0)

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

Комментарии (0)

Я был перед этой ошибкой при выполнении карма модульные тесты Добавление MatSelectModule в импорте устраняет проблему

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],
Комментарии (0)

У меня была эта же ошибка - я случайно переплетены [(ngModel)] на мой мат-форма-полевместоввод` элемент.

Комментарии (0)

Это немного глупо, но я получил это сообщение об ошибке, случайно использовав [formControl] вместо [formGroup]. См. здесь:

WRONG

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formControl]="formGroup">
      <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">
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}
Комментарии (0)

Вы пробовали двигать свой [(ngModel)] к див вместо выключатель в HTML? У меня была такая же ошибка появляется в моем коде, и это было потому, что я привязан модель на в <мат-вариант> вместо <мат-выберите>. Хотя я не использую элемент управления формы.

Комментарии (0)

В моем случае я использовал <НГ-выберите> директива, но я'т импортировал его в мой модуль.файл ТС. Импорт исправил.

Комментарии (0)

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

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

Что же на самом деле решит моя ошибка была написать ниже фрагмент кода внутри тега отец и HTML элементов .

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

Код:

    *ngIf="variable-name"

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

Это мой компонент.код ТС:

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">
             ...

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

marc_s
Редактировал ответ 27-го сентября 2019 в 12:42
Комментарии (1)

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

Комментарии (0)