Cố gắng suy nghĩ về cách xây dựng một hình thức đa bước ở góc 2

Question

Tôi đang cố gắng xây dựng một hình thức 3 bước nhỏ. Nó sẽ là một cái gì đó tương tự như sau:

Con đường tôi đã làm trong này phản ứng là bằng cách sử dụng Redux để theo dõi hoàn thành hình thức và render đánh dấu hình dáng cơ thể dựa trên số bước (0, 1, 2) .

Trong góc 2, cách tốt nhất để làm điều này là gì? Đây là những gì tôi đang cố gắng vào lúc này, và tôi vẫn đang nghiên cứu nó. Cách tiếp cận của tôi có ổn không? Có cách nào tốt hơn để làm điều đó không?

Tôi có thành phần gốc <app-form> và tôi sẽ lồng vào bên trong nó <app-form-header> và <app-form-body>.

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

Trong <app-form> phần Tôi có một step: number và formData: Array<FormData>. Bước này chỉ là một chỉ mục cho từng đối tượng trong formData. Điều này sẽ được chuyển xuống tiêu đề. formData sẽ chịu trách nhiệm về dữ liệu biểu mẫu từ người dùng. Mỗi lần đầu vào biểu mẫu hợp lệ, người dùng có thể nhấp vào Tiếp theo để thực thi nextStep() để tăng chỉ mục. Mỗi bước có đánh dấu mẫu được liên kết.

Có cách nào tốt hơn để làm điều gì đó như thế này không?

Answer 1

đừng lạm dụng nó, nếu đó là biểu mẫu đơn giản, bạn không cần sử dụng bộ định tuyến hoặc dịch vụ để chuyển dữ liệu giữa các bước.

một cái gì đó như thế này sẽ làm:

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

Nó vẫn là một mẫu nhỏ, và bạn Kan giữ tất cả các hình thức và tất cả các dữ liệu trong một thành phần, và nếu bạn muốn, bạn có thể thay thế các ngIf với một cái gì đó mà có thể vặn css-lớp trên -divs step1,2,3 và animate họ như người dùng di chuyển sang bước tiếp theo

Answer 2

Nếu bạn muốn giữ cho mọi thứ có thể mở rộng, bạn có thể thử một cái gì đó như thế này:

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