Forms 角度2错误：找不到具有未指定名称属性的控件-组件中的组件

我必须创建一个表单，我想更清楚地了解组件

形式的主要思想是：

FormComponent |> 字段组件 |>表单的输入组件

所以我有PartnerFormComponent：

Html:

然后从组件我有html组合：

  <div class="components_situation">
    <div class="field_form_title">
      {{title}} <span class="is_required_form" [hidden]="!isRequired">*</span>
    </div>
    <div [formGroup]="formGroup" >
    <select id="billingEntity" [(ngModel)]="partnerConfiguration.fakeBillingEntity"
            formControlName="billingEntity"
            [class.invalid]="form.controls['billingEntity'].touched && !form.controls['billingEntity'].valid"
    >
      <option disabled hidden [value]="selectUndefinedOptionValue">-- select --</option>
      <option *ngFor="let obj of billingEntities" [value]="obj.value" >{{obj.name}}</option>
    </select>
    </div>
    <div class="some_explanation_form_field">{{someExplanation}}</div>
  </div>

但毕竟我有一个错误：

ComboBillingEntityComponent.html:5错误：找不到具有未指定名称属性的控件 at_投掷者（forms.es5.js:1852） 在setUpControl（forms.es5.js:1760） 在FormGroupDirective.webpackJsonp…/../forms/@angular/forms.es5.js.FormGroupDirective.addControl（forms.es5.js:4733） 在FormControlName.webpackJsonp…/../forms/@angular/forms.es5.js.FormControlName.\u setUpControl（forms.es5.js:5321） 在FormControlName.webpackJsonp…/../forms/@angular/forms.es5.js.FormControlName.ngOnChanges（forms.es5.js:5239） 在checkAndUpdateDirectiveInline（core.es5.js:10831） 在checkAndUpdateNodeLine（core.es5.js:12330） 在checkAndUpdateNode（core.es5.js:12269） 在debugCheckAndUpdateNode（core.es5.js:13130） 在debugCheckDirectivesFn（core.es5.js:13071）

---

知道如何将输入绑定到主窗体吗。。我做错了什么？

您的组件必须实现并注册它是一个多依赖项。帕斯卡·普雷希特在上有一篇很好的博客文章

简而言之，在通过定义函数

writeValue

、

registerChange

和

registerTouched

实现

ControlValueAccessor

后，必须提供现有值，以便Angular知道您正试图将其用作表单控件

@Component({
  // ...
  providers: [
    { 
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ComboBillingEntityComponent),
      multi: true,
    }
  ],
  // ...
})
class ComboBillingEntityComponent implements ControlValueAccessor {
  // ...
}

在此之后，您可以在模板中使用

标记上的

formControlName

：

<combo-billing-entity formControlName="billingInfo"></combo-billing-entity>

---

您的表单中有很多问题。您试图在输入字段中使用双向绑定，例如

[（formGroup）]=“partnerForm”

，但是您没有使用

@Output

实际触发双向绑定，因此您没有正确使用它

表单对象实际上是一个对象，对象在JS中是可变的，并通过引用传递。有时，这不是理想的行为，但在这种情况下，我们希望这样，因为我们有嵌套的组件。所以无论您如何在子组件中形成字段，父组件都会知道，所以您实际上不需要双向绑定

其次，请避免以被动形式使用

[（ngModel）]

。我注意到可能会出现奇怪的行为，这是可以理解的，因为我们有两个绑定，一个是ngModel变量，另一个是表单控制变量。改用表单控件，并从模板中删除所有ngModel。您可以为表单控件设置值，这基本上起到双向绑定的作用，因为您可以随时从TS访问表单控件值。所以

[（ngModel）]

在父级中构建整个表单，然后将表单组传递给子级，或者将嵌套的表单组传递给子级。因此，在您的家长中，您实际上希望构建表单：

this.partnerForm = this.fb.group({
  billingEntity: ['hey I am initial value']
})

在上面，您可以将初始值设置为

billingEntity

，或者如果您需要在其他点手动设置默认值，您可以通过以下方式实现：

this.partnerForm.get（'billingEntity'）。setValue（…）

我们现在将此表格传递给孩子：

<combo-billing-entity [partnerForm]="partnerForm"></combo-billing-entity>

然后我们就可以使用它，例如：

<div [formGroup]="partnerForm">
  <input formControlName="billingEntity" />
</div>

我看到您正试图在那里使用

[（ngModel）]

，但正如前面提到的，您可以放弃它，改用表单控件。值很好地存储在

formGroup.get（'billingEntity'）.value中，如前所述，如果您需要在某个点设置值，您可以这样做。但是所有表单值都很好地存储在表单对象中，即
partnerForm.value

下面是一个简单的演示：

我建议您阅读有关嵌套表单的内容，这是一个很好的入门指南：
嘿，答案如何？是否适合您，或者您是否需要进一步的帮助？：）
this.partnerForm = this.fb.group({
  billingEntity: ['hey I am initial value']
})

<combo-billing-entity [partnerForm]="partnerForm"></combo-billing-entity>

@Input() formGroup: FormGroup;

<div [formGroup]="partnerForm">
  <input formControlName="billingEntity" />
</div>