如何在子组件中使用 formGroupName [英] How to use formGroupName inside child components

问题描述

如何在子组件中使用 formGroupName?例如:

我有 ParentFormComponent

 parentForm: FormGroup;构造函数(私有FB:FormBuilder，私有http:Http){}ngOnInit() {this.parentForm = this.fb.group({_general: this.fb.group ({项目名:''})})}

在 html 中:

 
<div formGroupName="_general"><mat-form-field><input matInput placeholder="项目名称"formControlName="项目名称"></mat-form-field>

</表单>

它工作得很好，但是当我想使用子组件时它不起作用:

<app-child [parentForm]='parentForm'></app-child></表单>

当我将它插入子组件时:

<mat-form-field><input matInput placeholder="项目名称"formControlName="项目名称"></mat-form-field>

并在 ts 文件中

 @Input() parentForm:FormGroup;

我收到错误:formGroupName 必须与父 formGroup 指令一起使用.您需要添加一个 formGroup指令并将其传递给现有的 FormGroup 实例(您可以在类中创建一个).

解决方案

Instead of Using input property binding Use FormGroupDirective

FormGroupDirective

<块引用>

该指令接受现有的 FormGroup 实例.然后它会使用此 FormGroup 实例匹配任何子 FormControl、FormGroup、和 FormArray 实例到子 FormControlName、FormGroupName 和FormArrayName 指令.

使用Viewproviders提供controlContainer，在你的子组件中注入FormGroupDirective获取父窗体实例

app.parent.html

<app-child></app-child></表单>

child.component.ts

import { Component, OnInit } from '@angular/core';从@angular/forms"导入 { FormControl, FormGroup, ControlContainer, FormGroupDirective, Validators, FormBuilder, NgModel };@成分({选择器:'app-child'，templateUrl: './child.component.html',styleUrls: ['./child.component.css'],viewProviders: [{ 提供: ControlContainer, useExisting: FormGroupDirective }]})导出类 ChildComponent 实现 OnInit {childForm;构造函数(私有 parentF:FormGroupDirective){}ngOnInit() {this.childForm = this.parentF.form;this.childForm.addControl('_general', new FormGroup({项目名称:new FormControl('')}))}}

child.component.html

<mat-form-field><input matInput placeholder="项目名称"formControlName="项目名称"><mat-form-field>

示例:https://stackblitz.com/edit/angular-ezqupz

How do i use formGroupName inside child components? for example:

i have ParentFormComponent

    parentForm: FormGroup;
    constructor(private fb: FormBuilder, private http: Http) { }
    ngOnInit() {


 this.parentForm = this.fb.group({
        _general: this.fb.group ({
           ProjectName:''
       })
  })
 }

In the html:

  <form [formGroup]="parentForm" (ngSubmit)="submitForm()">
     <div formGroupName="_general">
        <mat-form-field>
             <input matInput placeholder="Project name" 
             formControlName="ProjectName">
        </mat-form-field>
    </div> 
  </form> 

it's working great but when i want to use child component it's not working:

<form [formGroup]="parentForm" (ngSubmit)="submitForm()">
          <app-child [parentForm]='parentForm'></app-child>
      </form> 

when i insert it to the child component:

<div formGroupName="_general">
            <mat-form-field>
                 <input matInput placeholder="Project name" 
                 formControlName="ProjectName">
            </mat-form-field>
        </div> 

and in the ts file

 @Input() parentForm:FormGroup;

i"m getting error: formGroupName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

解决方案

Instead of Using input property binding Use FormGroupDirective

FormGroupDirective

This directive accepts an existing FormGroup instance. It will then use this FormGroup instance to match any child FormControl, FormGroup, and FormArray instances to child FormControlName, FormGroupName, and FormArrayName directives.

Use Viewproviders to provide controlContainer, Inject FormGroupDirective in your child component to get the parentform instance

app.parent.html

<form [formGroup]="parentForm">
  <app-child></app-child>
</form>

child.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ControlContainer, FormGroupDirective, Validators, FormBuilder, NgModel } from '@angular/forms';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class ChildComponent implements OnInit {
  childForm;
  constructor(private parentF: FormGroupDirective) { }

  ngOnInit() {

    this.childForm = this.parentF.form;
    this.childForm.addControl('_general', new FormGroup({
      ProjectName: new FormControl('')
    }))

  }
}

child.component.html

<div formGroupName="_general">
     <mat-form-field>
                 <input matInput placeholder="Project name" 
                 formControlName="ProjectName"> 
      <mat-form-field>  
 </div>

Example:https://stackblitz.com/edit/angular-ezqupz

这篇关于如何在子组件中使用 formGroupName的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！