Angular 被动窗体嵌套组件不工作

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

我累了，但我有点不对劲

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

父HTML

<form [formGroup]="disciplineForm">

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

    </form>

<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>

---

缺少将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>

纪律
判定元件
EN

当您想使用child分割表单组时，您需要pass或表单组本身或控件。看

你的孩子可以像

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

//并且有一个@Input（）
@Input（）formGroup:formGroup

那么你的父母就像

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

{{myForm？.value}json}

或者只能传递一个控件

这孩子会死的

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

//并且有一个@Input（）
@Input（）formControl:formControl

父母变成了

---

它不工作。我想从父控件验证表单。只有输入数据验证应为组件级。

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

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