错误:在switch上没有指定name属性的窗体控件的值访问器

下面是我的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)

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

当前回答

我在运行单元测试时遇到了这个问题。为了解决这个问题，我在我的spec.ts文件中添加了MatSlideToggleModule的导入。

2020-11-24 18:16:53

其他回答

在我的例子中，我在标签而不是输入中插入了[(ngModel)]。还有一个警告，我尝试正确地运行上述错误在指定的行，但错误不会去。如果您在其他地方犯了相同的错误，它仍然会在同一行向您抛出相同的错误

2019-08-17 05:44:01

这是一种愚蠢的，但我得到这个错误消息，不小心使用[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: ''
    })
  }
}

2019-01-18 06:22:25

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

2021-01-06 08:48:48

在我的情况下，问题是我创建了一个@Input变量与保留名称formControl。

2021-02-22 12:26:50

#背景

NativeScript 6.0

在我的例子中，错误是由将元素标签从更改为by fault触发的。<TextView an [(ngModel)]="name"。被定义。

删除[(ngModel)]="name"错误消失。

2020-11-07 22:30:42

错误:在switch上没有指定name属性的窗体控件的值访问器

推荐文章

最新文章

标签