使用ControlContainer创建可重用的matInput组件时，“名称控件无法使用值控件”

问题描述

我跟随this guide和ControlContainer创建可重用表单，成功创建了可重用表单组，但是当我尝试用matInput创建可重用表单元素时，遇到了{{1 }}错误。这是No value accessor文件：

my-form-field.ts

这是我的用法：

import { Component,Input,OnInit } from '@angular/core';
import {
  ControlContainer,FormBuilder,FormControl,FormGroup,FormGroupDirective,} from '@angular/forms';

@Component({
  selector: 'my-form-field',template: `
    <mat-form-field>
      <mat-label>{{label}}</mat-label>
      <input matInput [formControlName]="formControlName">
    </mat-form-field>
  `,viewProviders: [{ provide: ControlContainer,useExisting: FormGroupDirective }],})
export class MyFormFieldComponent implements OnInit {
  @input() formControlName: string;
  @input() label: string;
  formGroup: FormGroup;

  constructor(private ctrlContainer: FormGroupDirective,private formBuilder: FormBuilder) {

  }

  ngOnInit(): void {
    this.formGroup = this.ctrlContainer.form;
    const control = new FormControl('');
    this.formGroup.addControl(this.formControlName,control);
  }
}

在此处重新创建示例： https://stackblitz.com/edit/angular-9-material-reusable-matinput?file=src/app/my-form-field.ts

我的方法可能是错误的，因此对可重复使用的matInput表单组件的建议也可以。

解决方法

您使用@Input formControlName作为名称，这使Angular感到困惑，请使用其他名称，例如controlName

<my-form-field label='Test' controlName='name'></my-form-field>

在输入中

@Input('controlName') formControlName: string;