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

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

в:

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

ц:

@Input()
control:FormControl;

Ответ 4

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

Ответ 5

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

НЕПРАВИЛЬНО

@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: ''
    })
  }
}

Ответ 6

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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