Step wizard form
I am making angular application with angular dynamic form where i need to split up the form into two parts.
In which i have input field firstname and lastname
at first page and on click the next button the children which has email and dropdown
needs to get loaded..
Html:
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<button (click)="goBack()"> Previous </button>
<button (click)="addControls('myArray')"> Next </button>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form>
Ts:
@Input() questions: QuestionBase<any> = ;
form: FormGroup;
payLoad = '';
page: number = 0
constructor(private qcs: QuestionControlService)
ngOnInit()
this.form = this.qcs.toFormGroup(this.questions);
onSubmit()
this.payLoad = JSON.stringify(this.form.value);
addControls(control: string)
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
removeControls(control: string)
let array=this.form.get(control) as FormArray;
array.removeAt(array.length-1);
goBack()
//Function to move to previous step
Working demo:
https://stackblitz.com/edit/angular-x4a5b6-p4agaq
In this demo with code you can see on every click over add button the children (array) get appended to the below in the same page..
I am also having removeControl
function which has,
removeControls(control: string)
let array=this.form.get(control) as FormArray;
array.removeAt(array.length-1);
To be clear i am not going to use this now and not going to remove anything anywhere.. Only thing is on click next the children via addControl
function adds the children to next next page and on previous get back to previous step.
In order to append to the same page given in demo, it should move to next page and again on click the previous it should get to original state on every next click it should give a new email and dropdown
and on previous a getback to previous step..
It should get moved like slider with sliding effect while moving forth and back..
Everything needs to be in pure angular and javascript/typescript based and there is no jquery.. As you could able to see in my demo i have not included any library or jquery..
Kindly help me to achieve the result.. Stucked for a long time..
javascript angular forms typescript angular-reactive-forms
add a comment |
I am making angular application with angular dynamic form where i need to split up the form into two parts.
In which i have input field firstname and lastname
at first page and on click the next button the children which has email and dropdown
needs to get loaded..
Html:
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<button (click)="goBack()"> Previous </button>
<button (click)="addControls('myArray')"> Next </button>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form>
Ts:
@Input() questions: QuestionBase<any> = ;
form: FormGroup;
payLoad = '';
page: number = 0
constructor(private qcs: QuestionControlService)
ngOnInit()
this.form = this.qcs.toFormGroup(this.questions);
onSubmit()
this.payLoad = JSON.stringify(this.form.value);
addControls(control: string)
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
removeControls(control: string)
let array=this.form.get(control) as FormArray;
array.removeAt(array.length-1);
goBack()
//Function to move to previous step
Working demo:
https://stackblitz.com/edit/angular-x4a5b6-p4agaq
In this demo with code you can see on every click over add button the children (array) get appended to the below in the same page..
I am also having removeControl
function which has,
removeControls(control: string)
let array=this.form.get(control) as FormArray;
array.removeAt(array.length-1);
To be clear i am not going to use this now and not going to remove anything anywhere.. Only thing is on click next the children via addControl
function adds the children to next next page and on previous get back to previous step.
In order to append to the same page given in demo, it should move to next page and again on click the previous it should get to original state on every next click it should give a new email and dropdown
and on previous a getback to previous step..
It should get moved like slider with sliding effect while moving forth and back..
Everything needs to be in pure angular and javascript/typescript based and there is no jquery.. As you could able to see in my demo i have not included any library or jquery..
Kindly help me to achieve the result.. Stucked for a long time..
javascript angular forms typescript angular-reactive-forms
add a comment |
I am making angular application with angular dynamic form where i need to split up the form into two parts.
In which i have input field firstname and lastname
at first page and on click the next button the children which has email and dropdown
needs to get loaded..
Html:
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<button (click)="goBack()"> Previous </button>
<button (click)="addControls('myArray')"> Next </button>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form>
Ts:
@Input() questions: QuestionBase<any> = ;
form: FormGroup;
payLoad = '';
page: number = 0
constructor(private qcs: QuestionControlService)
ngOnInit()
this.form = this.qcs.toFormGroup(this.questions);
onSubmit()
this.payLoad = JSON.stringify(this.form.value);
addControls(control: string)
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
removeControls(control: string)
let array=this.form.get(control) as FormArray;
array.removeAt(array.length-1);
goBack()
//Function to move to previous step
Working demo:
https://stackblitz.com/edit/angular-x4a5b6-p4agaq
In this demo with code you can see on every click over add button the children (array) get appended to the below in the same page..
I am also having removeControl
function which has,
removeControls(control: string)
let array=this.form.get(control) as FormArray;
array.removeAt(array.length-1);
To be clear i am not going to use this now and not going to remove anything anywhere.. Only thing is on click next the children via addControl
function adds the children to next next page and on previous get back to previous step.
In order to append to the same page given in demo, it should move to next page and again on click the previous it should get to original state on every next click it should give a new email and dropdown
and on previous a getback to previous step..
It should get moved like slider with sliding effect while moving forth and back..
Everything needs to be in pure angular and javascript/typescript based and there is no jquery.. As you could able to see in my demo i have not included any library or jquery..
Kindly help me to achieve the result.. Stucked for a long time..
javascript angular forms typescript angular-reactive-forms
I am making angular application with angular dynamic form where i need to split up the form into two parts.
In which i have input field firstname and lastname
at first page and on click the next button the children which has email and dropdown
needs to get loaded..
Html:
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<button (click)="goBack()"> Previous </button>
<button (click)="addControls('myArray')"> Next </button>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form>
Ts:
@Input() questions: QuestionBase<any> = ;
form: FormGroup;
payLoad = '';
page: number = 0
constructor(private qcs: QuestionControlService)
ngOnInit()
this.form = this.qcs.toFormGroup(this.questions);
onSubmit()
this.payLoad = JSON.stringify(this.form.value);
addControls(control: string)
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
removeControls(control: string)
let array=this.form.get(control) as FormArray;
array.removeAt(array.length-1);
goBack()
//Function to move to previous step
Working demo:
https://stackblitz.com/edit/angular-x4a5b6-p4agaq
In this demo with code you can see on every click over add button the children (array) get appended to the below in the same page..
I am also having removeControl
function which has,
removeControls(control: string)
let array=this.form.get(control) as FormArray;
array.removeAt(array.length-1);
To be clear i am not going to use this now and not going to remove anything anywhere.. Only thing is on click next the children via addControl
function adds the children to next next page and on previous get back to previous step.
In order to append to the same page given in demo, it should move to next page and again on click the previous it should get to original state on every next click it should give a new email and dropdown
and on previous a getback to previous step..
It should get moved like slider with sliding effect while moving forth and back..
Everything needs to be in pure angular and javascript/typescript based and there is no jquery.. As you could able to see in my demo i have not included any library or jquery..
Kindly help me to achieve the result.. Stucked for a long time..
javascript angular forms typescript angular-reactive-forms
javascript angular forms typescript angular-reactive-forms
edited Nov 15 '18 at 12:29
Maniraj from Karur
asked Nov 15 '18 at 4:42
Maniraj from KarurManiraj from Karur
1,0591135
1,0591135
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
If you want to create stepper form you can project the form and use the formcontrol to connect the parentformgroup.
ParentComponent.ts
Next
<div class="step container" *ngIf="form.valid && nextForm" >
<form [formGroup]="step2">
<app-step2 (control)="enableSave($event)"></app-step2>
<button class="btn btn-primary" (click)="moveToPrevious()" >Previous</button>
</form>
</div>
<hr>
<button
[disabled]="eSave"
class="btn btn-primary" (click)="save()">Save</button>
</app-stepper-wrapper>
ParentComponent.ts
name = 'Angular';
eSave = true;
form = new FormGroup();
step2 = new FormGroup();
nextForm = false;
ngOnInit()
this.form.statusChanges.subscribe(s => this.eSave = true);
moveToNext()
if (this.form.valid)
this.nextForm = true;
moveToPrevious()
this.nextForm = false;
save()
console.log(this.form);
console.log(this.step2);
enableSave($event)
if ($event == 'VALID' && this.form.valid)
this.eSave = false;
Example:https://stackblitz.com/edit/angular-nynvvr
Chellappan, I couldn't able to find anything on click next button in your solution..
– Maniraj from Karur
Nov 15 '18 at 7:50
1
@ManiRaj Nantri!!!!
– Chellappan
Nov 15 '18 at 9:17
Chellappan, Can you help me here, stucked for past two days, stackoverflow.com/questions/53316581/…
– Maniraj from Karur
Nov 15 '18 at 9:48
I will try to help later
– Chellappan
Nov 15 '18 at 9:55
Okay please help me to achieve the result..
– Maniraj from Karur
Nov 15 '18 at 9:57
|
show 14 more comments
Pass array in the goBack method which you want to remove
<button (click)="goBack('myArray')"> Previous </button>
Put this method in the component ts file
goBack(control: string)
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).removeAt(children.length-1)
1
I am in the need of the children in the next page and not in same page..
– Maniraj from Karur
Nov 15 '18 at 5:49
add a comment |
Have try to reach your requirements : Except UI part. I hope you can handle you UI as your requirement.
TS :
import Component, Input, OnInit from '@angular/core';
import FormGroup, FormArray from '@angular/forms';
import QuestionBase from './question-base';
import QuestionControlService from './question-control.service';
@Component(
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
providers: [QuestionControlService]
)
export class DynamicFormComponent implements OnInit
@Input() questions: QuestionBase<any> = ;
form: FormGroup;
payLoad = '';
page: number = 0;
constructor(private qcs: QuestionControlService)
ngOnInit()
this.form = this.qcs.toFormGroup(this.questions);
onSubmit()
this.payLoad = JSON.stringify(this.form.value);
addControls(control: string, index: any)
let array = this.form.get('myArray') as FormArray;
if (array.length > this.page)
this.page = this.page + 1;
else
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
this.page = this.page + 1;
removeControls(control: string)
let array = this.form.get(control) as FormArray;
array.removeAt(array.length - 1);
goBack()
if (this.page > 0)
this.page = this.page - 1;
//let array = this.form.get('myArray') as FormArray;
//array.removeAt(array.length - 1);
//Function to move to previous step
HTML :
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<ng-template [ngIf]="i + 1 == page">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</ng-template>
</div>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<button (click)="goBack()"> Previous </button>
<button (click)="addControls('myArray',i)"> Next </button>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form> <br>
<pre>
json
</pre>
</div>
This will help you showing one page at a time. It will create new one if no next form exists. And on clicking previous it will navigate to old form.
I am in the need of the children in the next view and not in same view. If it moves to next view then provide stackblitz moving to next
– Maniraj from Karur
Nov 15 '18 at 5:51
add a comment |
So, you want to remove lastly added control email and dropdown
control from the form group array
.
I have added the code into goBack()
function to remove child form group controls.
Component:
goBack()
//Function to move to previous step
if(this.form.controls['myArray'])
const arr = <FormArray>this.form.controls.myArray;
arr.removeAt(arr.length - 1);
Working demo: https://angular-x4a5b6-cc4kyr.stackblitz.io
For this i already have removeControl function, you can see in example.. The thing is on click next button, thefirst name and last name
needs to get hidden and the email and dropdown needs to come.. On click the previous button thefirstname and lastname
come.. This alone my requirement.. And no need of remove function now.. On each next click thedropdown and email
needs to get show in next next screen.. The question is mainly to handle the thing in the different views and not on same page..
– Maniraj from Karur
Nov 15 '18 at 5:23
Okay, I will suggest you make a new route in this case for email and dropdown. Because things become complex if you do manual hide and show.
– Surjeet Bhadauriya
Nov 15 '18 at 5:26
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312544%2fstep-wizard-form%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
If you want to create stepper form you can project the form and use the formcontrol to connect the parentformgroup.
ParentComponent.ts
Next
<div class="step container" *ngIf="form.valid && nextForm" >
<form [formGroup]="step2">
<app-step2 (control)="enableSave($event)"></app-step2>
<button class="btn btn-primary" (click)="moveToPrevious()" >Previous</button>
</form>
</div>
<hr>
<button
[disabled]="eSave"
class="btn btn-primary" (click)="save()">Save</button>
</app-stepper-wrapper>
ParentComponent.ts
name = 'Angular';
eSave = true;
form = new FormGroup();
step2 = new FormGroup();
nextForm = false;
ngOnInit()
this.form.statusChanges.subscribe(s => this.eSave = true);
moveToNext()
if (this.form.valid)
this.nextForm = true;
moveToPrevious()
this.nextForm = false;
save()
console.log(this.form);
console.log(this.step2);
enableSave($event)
if ($event == 'VALID' && this.form.valid)
this.eSave = false;
Example:https://stackblitz.com/edit/angular-nynvvr
Chellappan, I couldn't able to find anything on click next button in your solution..
– Maniraj from Karur
Nov 15 '18 at 7:50
1
@ManiRaj Nantri!!!!
– Chellappan
Nov 15 '18 at 9:17
Chellappan, Can you help me here, stucked for past two days, stackoverflow.com/questions/53316581/…
– Maniraj from Karur
Nov 15 '18 at 9:48
I will try to help later
– Chellappan
Nov 15 '18 at 9:55
Okay please help me to achieve the result..
– Maniraj from Karur
Nov 15 '18 at 9:57
|
show 14 more comments
If you want to create stepper form you can project the form and use the formcontrol to connect the parentformgroup.
ParentComponent.ts
Next
<div class="step container" *ngIf="form.valid && nextForm" >
<form [formGroup]="step2">
<app-step2 (control)="enableSave($event)"></app-step2>
<button class="btn btn-primary" (click)="moveToPrevious()" >Previous</button>
</form>
</div>
<hr>
<button
[disabled]="eSave"
class="btn btn-primary" (click)="save()">Save</button>
</app-stepper-wrapper>
ParentComponent.ts
name = 'Angular';
eSave = true;
form = new FormGroup();
step2 = new FormGroup();
nextForm = false;
ngOnInit()
this.form.statusChanges.subscribe(s => this.eSave = true);
moveToNext()
if (this.form.valid)
this.nextForm = true;
moveToPrevious()
this.nextForm = false;
save()
console.log(this.form);
console.log(this.step2);
enableSave($event)
if ($event == 'VALID' && this.form.valid)
this.eSave = false;
Example:https://stackblitz.com/edit/angular-nynvvr
Chellappan, I couldn't able to find anything on click next button in your solution..
– Maniraj from Karur
Nov 15 '18 at 7:50
1
@ManiRaj Nantri!!!!
– Chellappan
Nov 15 '18 at 9:17
Chellappan, Can you help me here, stucked for past two days, stackoverflow.com/questions/53316581/…
– Maniraj from Karur
Nov 15 '18 at 9:48
I will try to help later
– Chellappan
Nov 15 '18 at 9:55
Okay please help me to achieve the result..
– Maniraj from Karur
Nov 15 '18 at 9:57
|
show 14 more comments
If you want to create stepper form you can project the form and use the formcontrol to connect the parentformgroup.
ParentComponent.ts
Next
<div class="step container" *ngIf="form.valid && nextForm" >
<form [formGroup]="step2">
<app-step2 (control)="enableSave($event)"></app-step2>
<button class="btn btn-primary" (click)="moveToPrevious()" >Previous</button>
</form>
</div>
<hr>
<button
[disabled]="eSave"
class="btn btn-primary" (click)="save()">Save</button>
</app-stepper-wrapper>
ParentComponent.ts
name = 'Angular';
eSave = true;
form = new FormGroup();
step2 = new FormGroup();
nextForm = false;
ngOnInit()
this.form.statusChanges.subscribe(s => this.eSave = true);
moveToNext()
if (this.form.valid)
this.nextForm = true;
moveToPrevious()
this.nextForm = false;
save()
console.log(this.form);
console.log(this.step2);
enableSave($event)
if ($event == 'VALID' && this.form.valid)
this.eSave = false;
Example:https://stackblitz.com/edit/angular-nynvvr
If you want to create stepper form you can project the form and use the formcontrol to connect the parentformgroup.
ParentComponent.ts
Next
<div class="step container" *ngIf="form.valid && nextForm" >
<form [formGroup]="step2">
<app-step2 (control)="enableSave($event)"></app-step2>
<button class="btn btn-primary" (click)="moveToPrevious()" >Previous</button>
</form>
</div>
<hr>
<button
[disabled]="eSave"
class="btn btn-primary" (click)="save()">Save</button>
</app-stepper-wrapper>
ParentComponent.ts
name = 'Angular';
eSave = true;
form = new FormGroup();
step2 = new FormGroup();
nextForm = false;
ngOnInit()
this.form.statusChanges.subscribe(s => this.eSave = true);
moveToNext()
if (this.form.valid)
this.nextForm = true;
moveToPrevious()
this.nextForm = false;
save()
console.log(this.form);
console.log(this.step2);
enableSave($event)
if ($event == 'VALID' && this.form.valid)
this.eSave = false;
Example:https://stackblitz.com/edit/angular-nynvvr
answered Nov 15 '18 at 7:43
ChellappanChellappan
5,4262419
5,4262419
Chellappan, I couldn't able to find anything on click next button in your solution..
– Maniraj from Karur
Nov 15 '18 at 7:50
1
@ManiRaj Nantri!!!!
– Chellappan
Nov 15 '18 at 9:17
Chellappan, Can you help me here, stucked for past two days, stackoverflow.com/questions/53316581/…
– Maniraj from Karur
Nov 15 '18 at 9:48
I will try to help later
– Chellappan
Nov 15 '18 at 9:55
Okay please help me to achieve the result..
– Maniraj from Karur
Nov 15 '18 at 9:57
|
show 14 more comments
Chellappan, I couldn't able to find anything on click next button in your solution..
– Maniraj from Karur
Nov 15 '18 at 7:50
1
@ManiRaj Nantri!!!!
– Chellappan
Nov 15 '18 at 9:17
Chellappan, Can you help me here, stucked for past two days, stackoverflow.com/questions/53316581/…
– Maniraj from Karur
Nov 15 '18 at 9:48
I will try to help later
– Chellappan
Nov 15 '18 at 9:55
Okay please help me to achieve the result..
– Maniraj from Karur
Nov 15 '18 at 9:57
Chellappan, I couldn't able to find anything on click next button in your solution..
– Maniraj from Karur
Nov 15 '18 at 7:50
Chellappan, I couldn't able to find anything on click next button in your solution..
– Maniraj from Karur
Nov 15 '18 at 7:50
1
1
@ManiRaj Nantri!!!!
– Chellappan
Nov 15 '18 at 9:17
@ManiRaj Nantri!!!!
– Chellappan
Nov 15 '18 at 9:17
Chellappan, Can you help me here, stucked for past two days, stackoverflow.com/questions/53316581/…
– Maniraj from Karur
Nov 15 '18 at 9:48
Chellappan, Can you help me here, stucked for past two days, stackoverflow.com/questions/53316581/…
– Maniraj from Karur
Nov 15 '18 at 9:48
I will try to help later
– Chellappan
Nov 15 '18 at 9:55
I will try to help later
– Chellappan
Nov 15 '18 at 9:55
Okay please help me to achieve the result..
– Maniraj from Karur
Nov 15 '18 at 9:57
Okay please help me to achieve the result..
– Maniraj from Karur
Nov 15 '18 at 9:57
|
show 14 more comments
Pass array in the goBack method which you want to remove
<button (click)="goBack('myArray')"> Previous </button>
Put this method in the component ts file
goBack(control: string)
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).removeAt(children.length-1)
1
I am in the need of the children in the next page and not in same page..
– Maniraj from Karur
Nov 15 '18 at 5:49
add a comment |
Pass array in the goBack method which you want to remove
<button (click)="goBack('myArray')"> Previous </button>
Put this method in the component ts file
goBack(control: string)
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).removeAt(children.length-1)
1
I am in the need of the children in the next page and not in same page..
– Maniraj from Karur
Nov 15 '18 at 5:49
add a comment |
Pass array in the goBack method which you want to remove
<button (click)="goBack('myArray')"> Previous </button>
Put this method in the component ts file
goBack(control: string)
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).removeAt(children.length-1)
Pass array in the goBack method which you want to remove
<button (click)="goBack('myArray')"> Previous </button>
Put this method in the component ts file
goBack(control: string)
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).removeAt(children.length-1)
edited Nov 15 '18 at 5:51
answered Nov 15 '18 at 5:46
Ushmi DaveUshmi Dave
713
713
1
I am in the need of the children in the next page and not in same page..
– Maniraj from Karur
Nov 15 '18 at 5:49
add a comment |
1
I am in the need of the children in the next page and not in same page..
– Maniraj from Karur
Nov 15 '18 at 5:49
1
1
I am in the need of the children in the next page and not in same page..
– Maniraj from Karur
Nov 15 '18 at 5:49
I am in the need of the children in the next page and not in same page..
– Maniraj from Karur
Nov 15 '18 at 5:49
add a comment |
Have try to reach your requirements : Except UI part. I hope you can handle you UI as your requirement.
TS :
import Component, Input, OnInit from '@angular/core';
import FormGroup, FormArray from '@angular/forms';
import QuestionBase from './question-base';
import QuestionControlService from './question-control.service';
@Component(
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
providers: [QuestionControlService]
)
export class DynamicFormComponent implements OnInit
@Input() questions: QuestionBase<any> = ;
form: FormGroup;
payLoad = '';
page: number = 0;
constructor(private qcs: QuestionControlService)
ngOnInit()
this.form = this.qcs.toFormGroup(this.questions);
onSubmit()
this.payLoad = JSON.stringify(this.form.value);
addControls(control: string, index: any)
let array = this.form.get('myArray') as FormArray;
if (array.length > this.page)
this.page = this.page + 1;
else
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
this.page = this.page + 1;
removeControls(control: string)
let array = this.form.get(control) as FormArray;
array.removeAt(array.length - 1);
goBack()
if (this.page > 0)
this.page = this.page - 1;
//let array = this.form.get('myArray') as FormArray;
//array.removeAt(array.length - 1);
//Function to move to previous step
HTML :
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<ng-template [ngIf]="i + 1 == page">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</ng-template>
</div>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<button (click)="goBack()"> Previous </button>
<button (click)="addControls('myArray',i)"> Next </button>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form> <br>
<pre>
json
</pre>
</div>
This will help you showing one page at a time. It will create new one if no next form exists. And on clicking previous it will navigate to old form.
I am in the need of the children in the next view and not in same view. If it moves to next view then provide stackblitz moving to next
– Maniraj from Karur
Nov 15 '18 at 5:51
add a comment |
Have try to reach your requirements : Except UI part. I hope you can handle you UI as your requirement.
TS :
import Component, Input, OnInit from '@angular/core';
import FormGroup, FormArray from '@angular/forms';
import QuestionBase from './question-base';
import QuestionControlService from './question-control.service';
@Component(
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
providers: [QuestionControlService]
)
export class DynamicFormComponent implements OnInit
@Input() questions: QuestionBase<any> = ;
form: FormGroup;
payLoad = '';
page: number = 0;
constructor(private qcs: QuestionControlService)
ngOnInit()
this.form = this.qcs.toFormGroup(this.questions);
onSubmit()
this.payLoad = JSON.stringify(this.form.value);
addControls(control: string, index: any)
let array = this.form.get('myArray') as FormArray;
if (array.length > this.page)
this.page = this.page + 1;
else
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
this.page = this.page + 1;
removeControls(control: string)
let array = this.form.get(control) as FormArray;
array.removeAt(array.length - 1);
goBack()
if (this.page > 0)
this.page = this.page - 1;
//let array = this.form.get('myArray') as FormArray;
//array.removeAt(array.length - 1);
//Function to move to previous step
HTML :
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<ng-template [ngIf]="i + 1 == page">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</ng-template>
</div>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<button (click)="goBack()"> Previous </button>
<button (click)="addControls('myArray',i)"> Next </button>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form> <br>
<pre>
json
</pre>
</div>
This will help you showing one page at a time. It will create new one if no next form exists. And on clicking previous it will navigate to old form.
I am in the need of the children in the next view and not in same view. If it moves to next view then provide stackblitz moving to next
– Maniraj from Karur
Nov 15 '18 at 5:51
add a comment |
Have try to reach your requirements : Except UI part. I hope you can handle you UI as your requirement.
TS :
import Component, Input, OnInit from '@angular/core';
import FormGroup, FormArray from '@angular/forms';
import QuestionBase from './question-base';
import QuestionControlService from './question-control.service';
@Component(
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
providers: [QuestionControlService]
)
export class DynamicFormComponent implements OnInit
@Input() questions: QuestionBase<any> = ;
form: FormGroup;
payLoad = '';
page: number = 0;
constructor(private qcs: QuestionControlService)
ngOnInit()
this.form = this.qcs.toFormGroup(this.questions);
onSubmit()
this.payLoad = JSON.stringify(this.form.value);
addControls(control: string, index: any)
let array = this.form.get('myArray') as FormArray;
if (array.length > this.page)
this.page = this.page + 1;
else
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
this.page = this.page + 1;
removeControls(control: string)
let array = this.form.get(control) as FormArray;
array.removeAt(array.length - 1);
goBack()
if (this.page > 0)
this.page = this.page - 1;
//let array = this.form.get('myArray') as FormArray;
//array.removeAt(array.length - 1);
//Function to move to previous step
HTML :
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<ng-template [ngIf]="i + 1 == page">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</ng-template>
</div>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<button (click)="goBack()"> Previous </button>
<button (click)="addControls('myArray',i)"> Next </button>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form> <br>
<pre>
json
</pre>
</div>
This will help you showing one page at a time. It will create new one if no next form exists. And on clicking previous it will navigate to old form.
Have try to reach your requirements : Except UI part. I hope you can handle you UI as your requirement.
TS :
import Component, Input, OnInit from '@angular/core';
import FormGroup, FormArray from '@angular/forms';
import QuestionBase from './question-base';
import QuestionControlService from './question-control.service';
@Component(
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
providers: [QuestionControlService]
)
export class DynamicFormComponent implements OnInit
@Input() questions: QuestionBase<any> = ;
form: FormGroup;
payLoad = '';
page: number = 0;
constructor(private qcs: QuestionControlService)
ngOnInit()
this.form = this.qcs.toFormGroup(this.questions);
onSubmit()
this.payLoad = JSON.stringify(this.form.value);
addControls(control: string, index: any)
let array = this.form.get('myArray') as FormArray;
if (array.length > this.page)
this.page = this.page + 1;
else
let question: any = this.questions.find(q => q.key == control);
let children = question ? question.children : null;
if (children)
(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
this.page = this.page + 1;
removeControls(control: string)
let array = this.form.get(control) as FormArray;
array.removeAt(array.length - 1);
goBack()
if (this.page > 0)
this.page = this.page - 1;
//let array = this.form.get('myArray') as FormArray;
//array.removeAt(array.length - 1);
//Function to move to previous step
HTML :
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<ng-container *ngIf="question.children">
<div [formArrayName]="question.key">
<div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
<ng-template [ngIf]="i + 1 == page">
<div *ngFor="let item of question.children">
<app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
</div>
</ng-template>
</div>
</div>
</ng-container>
<ng-container *ngIf="!question.children">
<app-question [question]="question" [form]="form"></app-question>
</ng-container>
</div>
<button (click)="goBack()"> Previous </button>
<button (click)="addControls('myArray',i)"> Next </button>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form> <br>
<pre>
json
</pre>
</div>
This will help you showing one page at a time. It will create new one if no next form exists. And on clicking previous it will navigate to old form.
answered Nov 15 '18 at 5:17
Vishw PatelVishw Patel
37119
37119
I am in the need of the children in the next view and not in same view. If it moves to next view then provide stackblitz moving to next
– Maniraj from Karur
Nov 15 '18 at 5:51
add a comment |
I am in the need of the children in the next view and not in same view. If it moves to next view then provide stackblitz moving to next
– Maniraj from Karur
Nov 15 '18 at 5:51
I am in the need of the children in the next view and not in same view. If it moves to next view then provide stackblitz moving to next
– Maniraj from Karur
Nov 15 '18 at 5:51
I am in the need of the children in the next view and not in same view. If it moves to next view then provide stackblitz moving to next
– Maniraj from Karur
Nov 15 '18 at 5:51
add a comment |
So, you want to remove lastly added control email and dropdown
control from the form group array
.
I have added the code into goBack()
function to remove child form group controls.
Component:
goBack()
//Function to move to previous step
if(this.form.controls['myArray'])
const arr = <FormArray>this.form.controls.myArray;
arr.removeAt(arr.length - 1);
Working demo: https://angular-x4a5b6-cc4kyr.stackblitz.io
For this i already have removeControl function, you can see in example.. The thing is on click next button, thefirst name and last name
needs to get hidden and the email and dropdown needs to come.. On click the previous button thefirstname and lastname
come.. This alone my requirement.. And no need of remove function now.. On each next click thedropdown and email
needs to get show in next next screen.. The question is mainly to handle the thing in the different views and not on same page..
– Maniraj from Karur
Nov 15 '18 at 5:23
Okay, I will suggest you make a new route in this case for email and dropdown. Because things become complex if you do manual hide and show.
– Surjeet Bhadauriya
Nov 15 '18 at 5:26
add a comment |
So, you want to remove lastly added control email and dropdown
control from the form group array
.
I have added the code into goBack()
function to remove child form group controls.
Component:
goBack()
//Function to move to previous step
if(this.form.controls['myArray'])
const arr = <FormArray>this.form.controls.myArray;
arr.removeAt(arr.length - 1);
Working demo: https://angular-x4a5b6-cc4kyr.stackblitz.io
For this i already have removeControl function, you can see in example.. The thing is on click next button, thefirst name and last name
needs to get hidden and the email and dropdown needs to come.. On click the previous button thefirstname and lastname
come.. This alone my requirement.. And no need of remove function now.. On each next click thedropdown and email
needs to get show in next next screen.. The question is mainly to handle the thing in the different views and not on same page..
– Maniraj from Karur
Nov 15 '18 at 5:23
Okay, I will suggest you make a new route in this case for email and dropdown. Because things become complex if you do manual hide and show.
– Surjeet Bhadauriya
Nov 15 '18 at 5:26
add a comment |
So, you want to remove lastly added control email and dropdown
control from the form group array
.
I have added the code into goBack()
function to remove child form group controls.
Component:
goBack()
//Function to move to previous step
if(this.form.controls['myArray'])
const arr = <FormArray>this.form.controls.myArray;
arr.removeAt(arr.length - 1);
Working demo: https://angular-x4a5b6-cc4kyr.stackblitz.io
So, you want to remove lastly added control email and dropdown
control from the form group array
.
I have added the code into goBack()
function to remove child form group controls.
Component:
goBack()
//Function to move to previous step
if(this.form.controls['myArray'])
const arr = <FormArray>this.form.controls.myArray;
arr.removeAt(arr.length - 1);
Working demo: https://angular-x4a5b6-cc4kyr.stackblitz.io
answered Nov 15 '18 at 5:18
Surjeet BhadauriyaSurjeet Bhadauriya
1,98211326
1,98211326
For this i already have removeControl function, you can see in example.. The thing is on click next button, thefirst name and last name
needs to get hidden and the email and dropdown needs to come.. On click the previous button thefirstname and lastname
come.. This alone my requirement.. And no need of remove function now.. On each next click thedropdown and email
needs to get show in next next screen.. The question is mainly to handle the thing in the different views and not on same page..
– Maniraj from Karur
Nov 15 '18 at 5:23
Okay, I will suggest you make a new route in this case for email and dropdown. Because things become complex if you do manual hide and show.
– Surjeet Bhadauriya
Nov 15 '18 at 5:26
add a comment |
For this i already have removeControl function, you can see in example.. The thing is on click next button, thefirst name and last name
needs to get hidden and the email and dropdown needs to come.. On click the previous button thefirstname and lastname
come.. This alone my requirement.. And no need of remove function now.. On each next click thedropdown and email
needs to get show in next next screen.. The question is mainly to handle the thing in the different views and not on same page..
– Maniraj from Karur
Nov 15 '18 at 5:23
Okay, I will suggest you make a new route in this case for email and dropdown. Because things become complex if you do manual hide and show.
– Surjeet Bhadauriya
Nov 15 '18 at 5:26
For this i already have removeControl function, you can see in example.. The thing is on click next button, the
first name and last name
needs to get hidden and the email and dropdown needs to come.. On click the previous button the firstname and lastname
come.. This alone my requirement.. And no need of remove function now.. On each next click the dropdown and email
needs to get show in next next screen.. The question is mainly to handle the thing in the different views and not on same page..– Maniraj from Karur
Nov 15 '18 at 5:23
For this i already have removeControl function, you can see in example.. The thing is on click next button, the
first name and last name
needs to get hidden and the email and dropdown needs to come.. On click the previous button the firstname and lastname
come.. This alone my requirement.. And no need of remove function now.. On each next click the dropdown and email
needs to get show in next next screen.. The question is mainly to handle the thing in the different views and not on same page..– Maniraj from Karur
Nov 15 '18 at 5:23
Okay, I will suggest you make a new route in this case for email and dropdown. Because things become complex if you do manual hide and show.
– Surjeet Bhadauriya
Nov 15 '18 at 5:26
Okay, I will suggest you make a new route in this case for email and dropdown. Because things become complex if you do manual hide and show.
– Surjeet Bhadauriya
Nov 15 '18 at 5:26
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312544%2fstep-wizard-form%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown