Как получить доступ к значениям разных входов дочернего компонента, который используется несколько раз в одном родительском компоненте? - PullRequest
Новая
       10

Как получить доступ к значениям разных входов дочернего компонента, который используется несколько раз в одном родительском компоненте?

0 голосов
/ 06 сентября 2018

Я отослал все другие связанные с этим вопросы, но ни один не дал подсказки, чтобы решить мою проблему

В моем приложении у меня есть мастер (родительский компонент) с несколькими страницами, где на нескольких из этих страниц повторно используется один и тот же дочерний компонент. Дочерний компонент имеет разные типы полей ввода. Когда пользователь изменяет любое значение в этих полях ввода на одной странице мастера, входные значения должны быть проверены, прежде чем пользователь сможет перейти на следующую страницу мастера. На последней странице мастера будет кнопка отправки, которая должна собрать все входные данные всех страниц мастера и API сервера вызовов. Каждая страница мастера будет иметь кнопку «Назад» и «Продолжить», поэтому в любое время пользователь может двигаться вперед (если значения текущей страницы проверены) и назад, при перемещении назад и вперед уже введенные значения ввода должны оставаться в соответствующих элементах ввода. После отправки на последнюю страницу мастера мастер закроется.

Логика проверки для дочернего компонента одинакова для каждого его экземпляра.

Как динамически изменить имена ngModel, указав префикс в качестве входных данных для дочернего компонента, и как передать это значение ngModel из родительского компонента во время отправки формы?

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>

ребенок-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>

1 Ответ

0 голосов
/ 06 сентября 2018

В родительском компоненте вы можете сохранить объект 

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

Вам необходимо передать тип доступа как входные данные дочернему компоненту 

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

В дочернем компоненте:

Вы можете передать значения от дочернего к родительскому компоненту, используя EventEmitter ().

...