Angular 角度：如何使用自定义组件保持窗体干燥？

我在组件内部有一个反应形式，如下所示：

<form [formGroup]="edit">
  <div class="form-group row">
    <label for="{{componentId}}_iptItemName" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="{{componentId}}_iptItemName" type="text" class="form-control"
             formControlName="name"/>
    </div>
  </div>
  <!-- more form groups -->
</form>

名称

大多数字段看起来都一样，因此我想使用

div.form-group

并创建一个可重用组件。问题是，我无法将

formControlName

放入嵌套组件中

<app-card-input label="Name">
  <input type="text" class="form-control" formControlName="name"/>
</app-card-input>

当我尝试在新组件上指定

formControlName

时，我得到：

名称为“name”的窗体控件没有值访问器

当我使用

@Input（）appFormControlName:string

并将该值传递给

输入的
[formControlName]
时，我得到：

formControlName必须与父formGroup指令一起使用。您需要添加一个formGroup指令并将其传递给现有的formGroup实例（您可以在类中创建一个）

我已经在我能看到的地方看到了一些东西，或者说，但是对于我正在做的事情来说，这两个看起来都太复杂了。我只想创建一个组件来保持干爽，而不是通过在单值表单组中创建自定义表单控件或乱七八糟来增加复杂性

我是不是错过了一些简单的东西？
ControlValueAccessor一开始似乎很复杂，但这正是您需要的。它将在以后解决许多问题。
它很容易使用，只是有很多“样板文件”。
ControlValueAccessor一开始似乎很复杂，但这正是您需要的。它将在以后解决许多问题。
它很容易使用，只是有很多“样板文件”
简短的回答只是以不同的方式命名组件输入，例如
@input（）myFormControlName

详细回答在（我称之为）“自定义组件”和“自定义控件”之间存在差异。编写自定义组件时，避免输入、输出（如ngModel、formControl、formControlName等）的“标准”名称，其用法如下：

<my-component [myData]="data" (myDataChange)="change()">



或者您可以传递formControl/formGroup或其他信息：

<my-component [myFormGroup]="someFormGroup" "myControlName"="someControlName">
// 'myControlName' IS @Input of component


//“myControlName”是组件的@Input

至于“自定义控件”，我将给你举个例子。
用途如下：

<mat-checkbox [(ngModel)]="checked">Checked</mat-checkbox>

已选中

或

已选中
//“formControlName”不是组件的@Input
简短回答只需以不同的方式命名组件输入，例如
@input（）myFormControlName

详细回答在（我称之为）“自定义组件”和“自定义控件”之间存在差异。编写自定义组件时，避免输入、输出（如ngModel、formControl、formControlName等）的“标准”名称，其用法如下：

<my-component [myData]="data" (myDataChange)="change()">



或者您可以传递formControl/formGroup或其他信息：

<my-component [myFormGroup]="someFormGroup" "myControlName"="someControlName">
// 'myControlName' IS @Input of component


//“myControlName”是组件的@Input

至于“自定义控件”，我将给你举个例子。
用途如下：

<mat-checkbox [(ngModel)]="checked">Checked</mat-checkbox>

已选中

或

已选中
//“formControlName”不是组件的@Input
我最终使用了
并将输入保存在表单组件中

<app-card-input label="Name">
  <input type="text" class="form-control" formControlName="name"/>
</app-card-input>

我主要决定走这条路线，因为它给了我使用不同控件类型的灵活性。我需要
checkbox
es、
texarea
s和其他控件，并且每个控件都有单独的
ControlValueAccessor
s（或试图将它们全部塞进一个控件中）可能会很麻烦

感谢@Petr和@Bojan的回答。他们为我指明了正确的方向。
我最终使用了
并将输入保留在表单组件中

<app-card-input label="Name">
  <input type="text" class="form-control" formControlName="name"/>
</app-card-input>

我主要决定走这条路线，因为它给了我使用不同控件类型的灵活性。我需要
checkbox
es、
texarea
s和其他控件，并且每个控件都有单独的
ControlValueAccessor
s（或试图将它们全部塞进一个控件中）可能会很麻烦

感谢@Petr和@Bojan的回答。他们为我指明了正确的方向。
如果需要自定义组件作为普通表单控件，则需要使用controlValueAccesor路径。这真的不是很复杂。您必须将formControl传递给子组件，并且必须使用独立的formControl指令使其工作。有些人认为[formControl]=“appFormControlName”如果需要自定义组件作为普通formControl，则需要执行controlValueAccesor路径。这真的不是很复杂。您必须将formControl传递给子组件，并且必须使用独立的formControl指令使其工作。有些人这样认为[formControl]=“appFormControlName”我会沿着这条路走下去，试试看。谢谢。我沿着这条路走，试试看。谢谢