下面是我的Angular组件:

@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)

当我改变元素开关输入它工作,知道我使用相同的结构到其他组件,它工作得很好。


当前回答

我还收到了这个错误,当我命名我的一个组件输入'formControl'。可能是留给别的东西用的。如果你想在组件之间传递FormControl对象,可以这样使用:

@Input() control: FormControl;

不是这样的:

@Input() formControl: FormControl;

奇怪-但有效:)

其他回答

它看起来像“formControl”是Angular表单的保留名称,当我使用这个名称作为组件的输入时,我在实际的from控件中得到了意想不到的行为。如果你问我,我会说这是Angular的一个bug。只需将您的输入名称替换为“frmCtrl”或其他东西,它就会工作。

如果你试图将ngModel添加到非输入元素中,比如<option> HTML标签,也会出现这个错误。确保你只把ngModel添加到<input>标签。 在我的例子中,我已经添加了一个ngModel到<ion-select-option>而不是<ion-select>。

我有同样的错误,但在我的情况下,这显然是一个同步问题,在呈现组件html的时刻。

我遵循了本页上提出的一些解决方案,但它们都对我有效,至少不是完全有效。

真正解决我的错误的是在元素的父html标记中编写下面的代码片段。

我绑定了变量。

代码:

    *ngIf="variable-name"

该错误显然是由项目试图渲染页面引起的,显然在评估变量的时候,项目就是找不到它的值。使用上面的代码片段,您可以确保在呈现页面之前询问变量是否已初始化。

这是我的分量。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">
             ...

我希望这能对你有所帮助。

我还创建了一个自定义控件。 解决此问题的方法如下:

constructor(
  @Optional() @Self()
  readonly ngControl: NgControl,
) {
  this.ngControl.valueAccessor = this;
}

在我的情况下,我有一个<TEXTAREA>标签从旧的html转换到angular。必须更改为<textarea>。