Versuchen, darüber nachzudenken, wie man eine mehrstufige Form in Winkel 2

Question

bauen Ich versuche, eine kleine, 3-Stufen-Form zu bauen. Es wäre so etwas wie dieses:

So wie ich diese in unter Verwendung von redux war reagieren tat Ausfüllhilfe zu verfolgen und Rendern der Formkörper Markup auf der Grundlage der Schrittnummer (0, 1, 2) .

In Winkel 2, was wäre ein guter Weg, dies zu tun? Hier ist, was ich gerade versuche, und ich arbeite immer noch daran. Ist meine Vorgehensweise in Ordnung? Gibt es einen besseren Weg, es zu tun?

Ich habe eine übergeordnete Komponente <app-form> und ich werde darin verschachteln <app-form-header> und <app-form-body>.

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

In <app-form> Komponente habe ich eine step: number und formData: Array<FormData>. Der Schritt ist nur ein Index für jedes Objekt in formData. Dies wird an den Header übergeben. formData ist verantwortlich für die Formulardaten des Benutzers. Jedes Mal, wenn die Formulareingabe gültig ist, kann der Benutzer auf Weiter klicken, um nextStep() auszuführen, um den Index zu erhöhen. Jedem Schritt ist ein Vorlagen-Markup zugeordnet.

Gibt es einen besseren Weg, so etwas zu tun?

Answer 1

Übertreiben Sie es nicht, wenn es ein einfaches Formular ist, müssen Sie den Router oder einen Dienst nicht verwenden, um Daten zwischen den Schritten zu übergeben.

so etwas wie dies tun:

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

Es ist immer noch eine kleine Vorlage, und Sie kan alle Form und alle Daten in einer Komponente zu halten, und wenn Sie Sie möchten, können Sie die ngIf ersetzen etwas, das CSS-Klassen auf den step1,2,3 -divs schaltet und animieren sie, wenn der Benutzer zum nächsten Schritt bewegt

Answer 2

Wenn Sie die Dinge erweiterbar halten möchten, können Sie so etwas wie dies versuchen könnte:

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