我正在使用角度动态形式制作角度应用程序，我需要将表单分成两部分.
其中我在第一页有输入字段 firstname 和 lastname，然后单击下一步按钮，需要加载具有 email 和 dropdown 的子项..>
HTML:
</ng-容器><ng-container *ngIf="!question.children"><app-question [question]="question" [form]="form"></app-question></ng-容器>
<按钮(点击)="goBack()">上一个 </button> <button (click)="addControls('myArray')">下一个</button><div class="form-row"><button type="submit" [disabled]="!form.valid">保存</button>
</表单>
Ts:
@Input() 问题: QuestionBase[] = [];表格:表格组；有效载荷 = '';页数:编号 = 0构造函数(私有 qcs:QuestionControlService){}ngOnInit() {this.form = this.qcs.toFormGroup(this.questions);}提交(){this.payLoad = JSON.stringify(this.form.value);}addControls(控制:字符串){让问题: any = this.questions.find(q => q.key == control);让孩子=问题?question.children : null;如果(儿童)(this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))}removeControls(控制:字符串){let array=this.form.get(control) as FormArray;array.removeAt(array.length-1);}回去() {//移动到上一步的函数} 工作演示:
https://stackblitz.com/edit/angular-x4a5b6-p4agaq
在这个带有代码的演示中，您可以在每次点击添加按钮时看到子项(数组)被附加到同一页面的下面..
我也有 removeControl 函数，它有，
removeControls(control: string){let array=this.form.get(control) as FormArray;array.removeAt(array.length-1);}要清楚的是，我现在不会使用它，也不会在任何地方删除任何东西.. 唯一的事情是通过 addControl 功能单击下一个子项将子项添加到下一页并继续上一步返回上一步.
为了附加到演示中给出的同一页面，它应该移动到下一页，再次点击上一页它应该在每次下一次点击时回到原始状态它应该给出一个新的电子邮件和下拉代码>，然后返回上一步..
它应该像滑块一样在前后移动时移动，具有滑动效果..
一切都需要纯 Angular 和基于 javascript/typescript 的，并且没有 没有 jquery.. 正如你在我的演示中看到的那样，我没有包含任何库或 jquery..>
请帮助我实现结果..卡了很长时间..
如果你想创建步进表单，你可以投影表单并使用表单控件连接父表单组.
ParentComponent.ts<小时>下一个
<小时><按钮[禁用]="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 = 假；ngOnInit() {this.form.statusChanges.subscribe(s => this.eSave = true);}移动到下一个(){如果(this.form.valid){this.nextForm = true;}}移动到上一个(){this.nextForm = false;}节省() {控制台日志(this.form)；控制台.log(this.step2);}enableSave($event) {if ($event == 'VALID' && this.form.valid) {this.eSave = false;}}
示例:https://stackblitz.com/edit/angular-nynvvr>
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..
解决方案 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
这篇关于步骤向导表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
