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

Posted 2023-02-22

【中文标题】formControlName 必须与父 formGroup 指令一起使用

【英文标题】：formControlName must be used with a parent formGroup directive

【发布时间】：2018-01-31 00:19:24

【问题描述】：

在创建模型驱动表单时，我收到一个错误：错误：。您需要添加一个 formGroup 指令并将一个现有的 FormGroup 实例传递给它（你可以在你的类中创建一个）。

请告诉我这段代码出了什么问题。

app.component.html

<div class="col-md-6">
  <form  (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
    <div class="form-group">
      <label for="sessionName">Session Name:</label>
      <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
    </div>
    <div class="form-group">
      <label for="abstract">Abstract:</label>
      <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
  </form>
</div>

app.component.ts

export class CreateSession 

    newSessionForm:FormGroup;
    abstract : FormControl;
    name : FormControl;

    ngOInInit()
        this.name = new FormControl('', Validators.required)
        this.abstract = new FormControl('', Validators.required)

        this.newSessionForm = new FormGroup(
            name:this.name,
            abstract: this.abstract
        )         
    


    saveSession(formValues)
        console.log(formValues);
    

【问题讨论】：

这里解决了！ ***.com/questions/43305975/…

【参考方案1】：

Angular 正在等待任何父元素上的FormGroupDirective。所以：

<form [formGroup]="newSessionForm" ...
  <input formControlName="name"
  ...
  <input formControlName="abstract"

如果您想使用 FormControl 而不使用 formGroup，您可以改用 FormControlDirective：

<input [formControl]="name"
...
<input [formControl]="abstract"

【讨论】：

如何在 typescript 中访问这个值？

【参考方案2】：

如果您的 FormGroup 在父组件中，而 Form 控件在子组件中，则必须在子组件中声明 viewProviders: [ provide: ControlContainer, useExisting: FormGroupDirective ]，如下所示：

@Component(
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  viewProviders: [ provide: ControlContainer, useExisting: FormGroupDirective ]
)

export class ChildComponent implements OnInit 
...

【参考方案3】：

你可以试试这个方法

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

ts文件代码

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

或者

<form [formGroup]="manageOrderForm">

</form>

ts文件代码

import  Router  from '@angular/router';

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

  manageOrderForm: any;

【参考方案4】：

首先，您必须指定 formGroup ，它将驱动与输入绑定的表单控件。

<form [formGroup]="newSessionForm" (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
<div class="form-group">
  <label for="sessionName">Session Name:</label>
  <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
</div>
<div class="form-group">
  <label for="abstract">Abstract:</label>
  <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
</div>
<button type="submit" class="btn btn-primary">Save</button>