错误：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令 - Angular 反应式表单

Answer 1

您在表单标签内嵌套了带有

FormGroup

指令的表单标签，请将其删除：

<form [formGroup]="guestForm" novalidate>
    <div class="panel-body">
        <form> -> Remove this
            <div class="col-md-12 col-sm-12">
                <div class="form-group col-md-3 col-sm-6">
                    <label>First Name*  </label>
                    <input formControlName="firstname" type="text" class="form-control input-sm">
                </div>
            </div>
        </form> -> Remove this
    </div>
</form>

Answer 2

在

modelDrivenForms

中，

[formGroup]="guestForm"

应该位于父元素中

<div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm">
  <label>First Name*  </label>
  <input formControlName="firstname" type="text" class="form-control input-sm">
</div>

Answer 3

当您在没有 formGroup 的情况下进行表单控制时。

错误代码：

<ul class="list-unstyled noti-list m-0">
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input
      formControlName="promotionMaterial"
      (change)="onChange($event)"
      class="tgl tgl-light tgl-primary"
      id="promotionMaterial"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="promotionMaterial"></label>
  </div>
</li>
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input formControlName="offer" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="offer" type="checkbox" />
    <label class="tgl-btn m-0" for="offer"></label>
  </div>
</li>
<li class="d-flex align-items-center">
  <div class="custom-switch ml-auto">
    <input
      formControlName="termsAndConditions"
      (change)="onChange($event)"
      class="tgl tgl-light tgl-primary"
      id="termsAndConditions"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="termsAndConditions"></label>
  </div>
</li>

在[错误代码]中我采用“formControlName”，所以它对我不起作用。

解决方案：

<ul class="list-unstyled noti-list m-0">
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input
      [formControl]="promotionMaterial"
      class="tgl tgl-light tgl-primary"
      id="promotionMaterial"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="promotionMaterial"></label>
  </div>
</li>
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input [formControl]="offer class="tgl tgl-light tgl-primary" id="offer" type="checkbox" />
    <label class="tgl-btn m-0" for="offer"></label>
  </div>
</li>
<li class="d-flex align-items-center">
  <div class="custom-switch ml-auto">
    <input
      [formControl]="termsAndConditions"
      class="tgl tgl-light tgl-primary"
      id="termsAndConditions"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="termsAndConditions"></label>
  </div>
</li>

在解决方案中，我将[formControl]插入formControlName，其工作正常

Answer 4

这些错误不是描述性的...... 就我而言 - 结果发现我在子组件中加倍了

formControlName='...'

。

父组件：

<div [formGroup]="formGroup">
    <quill-text-editor formControlName="my_control"></quill-text-editor>
</div>

quill-text-editor 组件模板：

<quill-editor
  formControlName="my_control" <--- I've deleted this to fix the error
  (onFocus)="onEditorFocus()"
  (onBlur)="onEditorBlur()"
></quill-editor>
<hr>
<div class="toolbar">
  <div class="tool">
    (...)

Answer 5

所以问题是，如果你只有一个表单控件，你还需要一个表单组吗？

就我而言，我必须通过 registerOnChange 方法使用 #ControlValueAccessor 将输入值传递给父组件。

当我在 formGroup 中设置 formControl 时，一切都是阳光和玫瑰，否则我会遇到同样的错误。

<mat-form-field appearance="fill">
    <mat-label > label</mat-label>
    <input matInput formControlName="planValue">
</mat-form-field>

比较：

<form [formGroup]="valueFG" >

<mat-form-field appearance="fill">
    <mat-label > label</mat-label>
    <input matInput formControlName="planValue">       
</mat-form-field></form>

Answer 6

<div class="col-md-12" formArrayName="educations">
</div>

ts 文件代码

educations: this.formBuilder.array([]),

或者

<form [formGroup]="manageOrderForm">

</form>

ts 文件代码 从 '@angular/router' 导入 { Router };

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {

  manageOrderForm: any;
}

Answer 7

解决方案 代码 [formGroup]="guestForm" 必须比上面几个级别，例如：

<div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm">
                                    <div>
                                        <div>
                                            <label>First Name* </label>
                                            <input formControlName="firstname" type="text" class="form-control 
                                           input-sm">
                                        </div>
                                    </div>
                                </div>