How to access the values of different inputs of child component that is used multiple times in a same parent component?

Question

I referred all other related SO questions, but none provided a clue to resolve my issue.

In my application, I have a wizard(parent component) with multiple pages, where few of those pages reuse the same child component. The child component has different types of input fields. When user changes any value in those input fields in one wizard page, the input values should be validated before allowing the user to move to next wizard page. Final wizard page will have submit button that should gather all inputs of all wizard pages and call server API. Each wizard page will have back and continue button, so at any time the user can move forward(if the current page values are validated) and backward, when moving back and forth, the already entered input values should stay in respective input elements. Upon submit on final wizard page, the wizard will get closed.

The validation logic on child component is the same on its every instance.

How to change the ngModel names dynamically by providing a prefix as input to child component and how to refer that ngModel value from parent component during form submission?

parent.component.html

<wizard>
    <wizard-step>
        <child-comp></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp></child-comp>
    </wizard-step>
    <wizard-step>
        <button type=”submit”>Submit</button>
    </wizard-step>
</wizard>

child-comp.component.html

<div>
    <select name=”conType” id=”conType” [(ngModel)]=”selectedConType”>
        <option value=”0”>Select type</option>
        <option [value]=type.id *ngFor=”let type of contypes; let i= index”>{{type.name}}</option>
</select>
    Input1: <input type=”text” name=”input1” id=”input1” [(ngModel)]=”input1” (focus)="checkValues1" (keyup)="validateInput1"/>
    Input2: <input type=”text” name=”input2” id=”input2” [(ngModel)]=”input2” (focus)="checkValues2" (keyup)="validateInput2"/>
    Input3: <input type=”text” name=”input3” id=”input3” [(ngModel)]=”input3” (focus)="checkValues3" (keyup)="validateInput3"/>
</div>

Suresh Kumar Ariya Suresh Kumar Ariya · Accepted Answer · 2018-09-06T05:46:49

In Parent Component, you can maintain object

{
  'step1': {
    'selectedConType': ''
  },
  'step2': {
    'selectedConType': ''
  },
  'step3': {
    'selectedConType': ''
  },
  'step4': {
    'selectedConType': ''
  }
}

You need to pass the access-type as input to child component

<wizard>
    <wizard-step>
        <child-comp accesstype="step1"></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp accesstype="step2"></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp accesstype="step3"></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp accesstype="step4"></child-comp>
    </wizard-step>
    <wizard-step>
        <button type=”submit”>Submit</button>
    </wizard-step>
</wizard>

In Child Component:

You can emit the values from child to parent component using EventEmitter().

How to access the values of different inputs of child component that is used multiple times in a same parent component?

1 Answers