ПОМИЛКА Помилка: немає доступу до значення для керування формою з невизначеним атрибутом імені на комутаторі

Ось мій компонент в 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елемента.

Я отримував це повідомлення про помилку в своїх модульних тестах з Жасмином. Я додав атрибут ngDefaultControl до користувацького елемента (у моєму випадку це було перемикання кутових слайдів матеріалу), і це усуває помилку.

<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. Додавання 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замість switchв вашому HTML? У мене в коді з'явилася та сама помилка, і це тому, що я прив'язав модель до <mat-option>замість a <mat-select>. Хоча я не використовую контроль форми.

У моєму випадку це був компонент.member, який не існував, наприклад

[formControl]="personId"

Додавши його до оголошення класу, це виправлено

this.personId = new FormControl(...)

У моєму випадку помилка була спровокована дублюванням імпорту компонента в модулі.

# Фон

• NativeScript 6.0

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

Після видалення [(ngModel)] = помилка "ім'я" зникла.

у моєму випадку у мене був <TEXTAREA>тег зі старого html під час перетворення в angular. Довелося змінити на <textarea>.