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

Question

[Юлия]

У меня на странице есть шаги регистрации. Каждый шаг - отдельный компонент. В одном из шагов пользователь вводит свои контактные данные и может доавить доп. контакты для этого по нажатию на кнопку появится еще один шаг. Этот шаг будет выглядеть идентично предыдущему и иметь такую же логику. Я хочу переиспользовать компонент с шагом основных контактов. Проблема заключается в том, что при вызове этого компонента повторно, поля этого шага (написаны на Reactive forms) хранят в себе те значения, что были введены в прошлом шаге. А если делать form.reset(), то поля предыдущего шага очищаются, а нового остаются заполненными. Нужно, чтоб было наоборот и чтоб пользователь мог добавить неограниченное количество доп. контактов. Каждый доп. контакт - новый шаг.

Comments

[lssssssssssl]

Можете визуально показать? Трудно это всё фантазировать

[Юлия]

lssssssssssl, код?

[lssssssssssl]

Юлия, Нет, в браузере хотя бы примерно как это выглядит всё. Просто не очень мне понятна последовательность шагов, которые вы хотите реализовать.

[Юлия]

lssssssssssl,
Это фото с документации. Но у меня это примерно так же. На втором шаге должно быть такое же поле для имени, как на первом.

[Владимир]

Ты не компонент пытаешся повторно использовать, а инстанс компонента.
Что то вроде

<wrapper>
  <step [stepData]="step1data">
  <step [stepData]="step2data"]>
</wrapper>

Вполне должно работать

[Юлия]

Владимир, как раз собиралась с этим. Нужно было Input добавить)