Angular 封装在子组件中的角垫形式字段

是否有一个简单易懂的示例说明如何在子组件中封装

mat表单字段

我想要什么

<form [formGroup]="form">
  <my-component 
      formControlName="someFormValue"
      label="hi">
  </my-component>
<form>

在my-component.html中

<mat-form-field>
  <mat-label>
    {{ label }}
  </mat-label>
  <input
    matInput
    ...
  />
  <mat-error>
    .... some form validation errors here
  </mat-error>
</mat-form-field>

{{label}}
.... 这里有一些表单验证错误

---

干杯…

最好的选择是作为

@Input

传递FormControl，而不是formControlName-

  <my-component 
      [control]="form.get('someFormField')"
      label="hi">
  </my-component>

并在组件中使用

@Input()control:FormControl

//in .html

<mat-form-field>
  ...
  <!--see that you use [formControl] directly-->
  <input matInput [formControl]="control"/>
  <mat-error>
    .... some form validation errors here...
  </mat-error>
</mat-form-field>

@Input（）控件：FormControl
//in.html
...
.... 这里有一些表单验证错误。。。

---

更新了：a

Thxs，这是解决我问题的好办法。而且它使使用嵌套表单更加容易

form.get（'nested.value'）

：）但是，现在我看到了这个错误：

错误错误：对于未指定名称属性的表单控件，没有值访问器

添加属性

name='myinput'

我必须实现ControlValueAccessor接口来消除这个错误消息：（我做了一个“快速堆栈闪电”：