I've been experimenting with creating nested reactive form components. Specifically, I'm working on a reusable input component for my app within a reactive form. How can I dynamically communicate with nested components in Reactive forms?
Despite my efforts, I keep encountering an error:
formControlName 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)
Parent HTML
<form [formGroup]="disciplineForm">
<app-input-multilang [labelName]="Title" (childToParent)="update($event)" ></app-input-multilang>
</form>
Reusable comp: 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>
Reusable comp: 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() {
}
}