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

Posted

技术标签:

【中文标题】错误:formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令 - Angular 反应式表单【英文标题】:Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive - Angular reactive forms 【发布时间】:2017-09-04 11:34:40 【问题描述】:

我有以下模板。我正在尝试处理反应式表单,但遇到了问题。

<form [formGroup]="guestForm" novalidate>
    <div class="panel-body">
        <form>
            <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>
    </div>
</form>

然后在我的组件中:

@Component(
    selector: 'guest-input',
    templateUrl: './guest-input.component.html',
)
export class GuestInputComponent implements OnInit 
    @Input()
    guest: Guest;

    guestForm: FormGroup;
    
    constructor(private _fb: FormBuilder)  

    ngOnInit() 
        this.guestForm = this._fb.group(
            firstname: ['test', [Validators.required, Validators.minLength(3)]]
        );
    

这一切对我来说都很好,但由于某种原因我得到了:

错误:未捕获(承诺中):错误:formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并将一个现有的 FormGroup 实例传递给它(你可以在你的类中创建一个)。

我以为我已经在 &lt;form&gt; 中声明了这一点。

【问题讨论】:

【参考方案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>

【讨论】:

【参考方案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>

【讨论】:

这是对我有用的。我将 formGroup 嵌套到很深。【参考方案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,其工作正常

【讨论】:

【参考方案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">
    (...)

【讨论】:

【参考方案5】:
<div class="col-md-12" formArrayName="educations">
</div>

ts文件代码

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

或者

<form [formGroup]="manageOrderForm">

</form>

ts 文件代码 从'@angular/router'导入路由器;

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

  manageOrderForm: any;

【讨论】:

以上是关于错误:formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令 - Angular 反应式表单的主要内容,如果未能解决你的问题,请参考以下文章

formGroupName必须与父formGroup指令一起使用

ERROR 错误:formArrayName 必须与父 formGroup 指令一起使用

mat-list 的 formControlName 给出 'mat-form-field 必须包含 MatFormFieldControl'

formGroupName 必须与父 formGroup 指令一起使用

解决[disabled]="true"与formControlName冲突

清北学堂模拟赛d3t6 c