Question

我一直在尝试创建嵌套的反应形式组件。我正在为反应式表单内的应用程序创建可重用的输入组件。如何与Reactive表单中的嵌套组件动态通信。

我很累，但是我遇到了错误，

formControlName必须与父formGroup指令一起使用。您需要添加一个formGroup指令并将其传递给现有的FormGroup实例（可以在您的类中创建一个实例）

父HTML

<form [formGroup]="disciplineForm">

      <app-input-multilang [labelName]="Title" (childToParent)="update($event)" ></app-input-multilang>

    </form>

可重复使用的组合：app-input-multilang HTML

<ng-container>
  <div class="form-group">
    <label for="discipline">{{Title}}</label>
    <div class="input-group">
      <input type="text" class="form-control" formControlName="control.name" id="discipline" required />
      <div class="input-group-append">
        <button class="btn btn-default active" type="button">de</button>
        <button class="btn btn-outline-secondary" type="button">en</button>
      </div>
    </div>
  </div>
</ng-container>

可重复使用的组合：app-input-multilang TS

import { Component, OnInit } from '@angular/core';
import { ControlValueAccessor,FormControl, FormGroup, Validators, NG_VALUE_ACCESSOR,NG_VALIDATORS, } from "@angular/forms";

@Component({
  selector: 'app-input-multilang',
  templateUrl: './form-input-multilang.component.html',
  styleUrls: ['./form-input-multilang.component.scss'],

})
export class FormInputMultilangComponent implements OnInit {



  constructor() { }

  ngOnInit() {
  }

}

Answer 1

当您想使用child分割formGroup时，需要pass或formGroup本身或控件。参见example in stackblitz

您的孩子可以像

<div [formGroup]="formGroup">
  <input formControlName="discipline"/>
</div>
//And has a @Input()
@Input() formGroup:FormGroup

那你的父母就像

<form [formGroup]="myForm">
<child [formGroup]="myForm"></child>
</form>
<pre>
  {{myForm?.value|json}}
</pre>

或者您只能传递一个控件。

孩子将是

<div >
  <input [formControl]="formControl"/>
</div>
//And has a @Input()
    @Input() formControl:FormControl

而父母成为

<form [formGroup]="myForm">
  <child2 [formControl]="myForm.get('mycontrol')"></child2 >
</form>

Answer 2

您缺少将formGroup指令添加到子组件中。在子组件中，您委托了名为cForm的表单，但没有将formGroup指令添加到子组件html中。像这样添加formGroup指令

 <ng-container>
  <form [formGroup]="cform">
     <div class="form-group">
  <label for="discipline">Discipline</label>
  <div class="input-group">
  <input type="text" class="form-control" formControlName="cname" id="discipline" required />
  <div class="input-group-append">
    <button class="btn btn-default active" type="button">de</button>
    <button class="btn btn-outline-secondary" type="button">en</button>
      </div>
     </div>
    </div>
  </form> 
</ng-container>

反应形式嵌套组件不起作用

2 个答案: