我正在使用 Angular 动态表单制作 Angular 应用程序,我需要将表单分成两部分。
其中我在首页有输入字段名字和姓氏
,然后单击下一个按钮,需要加载具有电子邮件和下拉列表
的子项。
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>
T:
@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
}
工作演示:
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
函数将子项添加到下一页并继续上一步 返回上一步。
为了附加到演示中给出的同一页面,它应该移动到下一页,然后再次单击上一页,它应该在每次单击时恢复到原始状态,它应该给出一个新的电子邮件和下拉列表
并在前面返回到上一步..
它应该像 slider 一样移动,在前后移动时具有滑动效果。
一切都需要是纯 Angular 和基于javascript/typescript的,并且没有jquery..正如你在我的演示中看到的,我没有包含任何库或jquery..
请帮助我实现结果..卡了很长时间..
最佳答案
如果您想创建步进表单,您可以投影表单并使用表单控件连接父表单组。
ParentComponent.ts
<小时/> 下一个<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;
}
}
关于javascript - 步骤向导形式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53312544/