formGroup 需要一个 FormGroup 实例。请在我在其他表单组中创建表单组时传入一个

Question

我有这个用于 addUser 的表单，我在其中有一个字段用于获取生日。

 this.userFG = this.formBuilder.group({
  name: [""],
  family: [""],
  birthDate: this.formBuilder.group({
    day: [""],
    month: [""],
    year: [""]
  })
});

我正在 HTML 中使用它：

    <form [formGroup]="userFG">
    <div>
        <label>Name : </label>
        <input formControlName="name">
  </div>
        <div>
            <label>lastName : </label>
            <input formControlName="family">
  </div>
            <div [formGroup]="birthDate">
                <div>
                    <label>day : </label>
                    <input formControlName="day">
  </div>
                    <div>
                        <label>month : </label>
                        <input formControlName="month">
  </div>
                        <div>
                            <label>year : </label>
                            <input formControlName="year">
  </div>
                        </div>
</form>

但是当我运行项目时，它向我显示了这个错误：

formGroup expects a FormGroup instance. Please pass one

这是DEMO

有什么问题吗？我该如何解决？

Answer 1

由于您使用的是嵌套表单组，对于内部表单组，请使用 formGroupName:

<div formGroupName="birthDate">
   ... 
   <input formControlName="day">
   ... 
   <input formControlName="month">
   ...
   <input formControlName="year">
<div>

Working Stackblitz

有关 formGroupName 的更多信息，请参见 docs。

formGroup 需要一个 FormGroup 实例。请在我在其他表单组中创建表单组时传入一个

formGroup expects a FormGroup instance. Please pass one in when I create a formgroup in other form group

javascript

angular

typescript

angular8

angular-forms