Summary of the current scenario I have:
- I have a container component which has a form.
- I have a secondary component which has an input field.
The container component has a control group and would like to assign the input field inside the secondary component to this control group.
Container Component code:
controlInput1: Control = new Control('');
controlInput2: Control = new Control('');
containerForm: ControlGroup = new ControlGroup({
input1: this.controlInput1,
input2: this.controlInput2
});
controlInput2 or input2 is based in the secondary component which is included in the containerForm.
<form [ng-form-model]="containerForm">
<input ng-control="input1" id="input1">
<secondary-component control-id="input2"></secondary-component>
</form>
Secondary component code html:
<h1>Secondary Component!</h1>
<input ng-control="{{controlId}}" id="{{controlId}}">
Secondary component code TS:
@component({
inputs: ['controlId']
})
export class SecondaryComponent {
@Input() controlId;
}
How can I get the component to start talking with the control group in the container?