Попытка подумать о том, как создать многоступенчатую форму в angular 2

Я пытаюсь создать небольшую трехэтажную форму. Это было бы похоже на это:

То, как я это делал в реакции, заключалось в использовании сокращения для завершения формы формы и рендеринг разметки тела формы на основе номера шага (0, 1, 2).

В angular 2, что было бы хорошим способом сделать это? Вот то, что я пытаюсь на данный момент, и я все еще работаю над этим. Мой подход прекрасен? Есть ли лучший способ сделать это?

У меня есть родительский компонент <app-form>, и я буду в нем внутри <app-form-header> и <app-form-body>.

<app-form>
  <app-header [step]="step"></app-header>
  <app-body [formData]="formData"></app-body>
</app-form>

В компоненте <app-form> у меня есть step: number и formData: Array<FormData>. Этот шаг является всего лишь индексом для каждого объекта в formData. Это будет передано в заголовок. formData будет отвечать за данные формы от пользователя. Каждый раз, когда ввод формы действителен, пользователь может нажать "Далее", чтобы выполнить nextStep(), чтобы увеличить индекс. На каждом шаге имеется соответствующая разметка шаблона.

Есть ли лучший способ сделать что-то подобное?

Ответ 1

не переусердствуйте, если это простая форма, вам не нужно использовать маршрутизатор или службу для передачи данных между этапами.

что-то вроде этого будет делать:

<div class="nav">
</div>

<div id="step1" *ngIf="step === 1">
<form></form>
</div>

<div id="step2" *ngIf="step === 2">
<form></form>
</div>

<div id="step3" *ngIf="step === 3">
<form></form>
</div>

Он по-прежнему является небольшим шаблоном, и вы сохраняете всю форму и все данные в одном компоненте, и если вы захотите, вы можете заменить ngIf на что-то, что переключает css-классы на step1,2,3 - divs и оживить их, когда пользователь переходит к следующему шагу

Ответ 2

Если вы хотите сохранить расширяемость, вы можете попробовать что-то вроде этого:

<sign-up>
  <create-account 
    [model]="model" 
    [hidden]="model.createAccount.finished">
  </create-account>
  <social-profiles 
    [model]="model" 
    [hidden]="model.socialProfiles.finished">
  </social-profiles>
  <personal-details 
    [model]="model" 
    [hidden]="model.personalDetails.finished">
  </personal-details>
 </sign-up>

 export class SignUpVm {
   createAccount: CreateAccountVm; //Contains your fields & finished bool
   socialProfiles: SocialProfilesVm; //Contains your fields & finished bool
   personalDetails: PersonalDetailsVm; //Contains your fields & finished bool
   //Store index here if you want, although I don't think you need it
 }

 @Component({})
 export class SignUp {
   model = new SignUpVm(); //from sign_up_vm.ts (e.g)
 }

 //Copy this for personalDetails & createAccount
 @Component({})
 export class SocialProfiles {
   @Input() model: SignUpVm;
 }