angular - 如何使用角度形式创建步进形式

Question

我需要使用 FormlyConfig 创建反应性角度表单，基于路由器参数（travel-information，immigration）我需要创建动态表单，最终提交需要传递model值。

这里classificationId的值基于单击下一步按钮从路由器获取。

我对如何构建表格感到困惑。

我可以构建表格，但我们有什么更好的方法来做到这一点吗？

这是我的服务文件

服务.ts

    gbtStepForm: StepForm[] = [
            {
                classificationId: 'travel-information',
                fields: [
                    {
                        key: 'test',
                        type: 'formly-button-toggle-group',
                        templateOptions: {
                            label: 'Test option',
                            options: ['Yes', 'No'],
                            required: true
                        }
                    },
                    {
                        key: 'test1',
                        type: 'formly-input',
                        templateOptions: {
                            label: 'Test Input',
                        }
                    }
                ]
            },
            {
                classificationId: 'immigration',
                fields: [
                    {
                        key: 'test-imme',
                        type: 'formly-textarea',
                        templateOptions: {
                            label: 'Test option'
                        }
                    },
                    {
                        key: 'test1',
                        type: 'formly-input',
                        templateOptions: {
                            label: 'Test Input',
                            required: true
                        }
                    }
                ]
            }
        ];
    createForms(classificationId: string) {
 if (!this.forms.get(classificationId)) { 
            let { fields } = this.getClassification(classificationId);
            const stepFormGroup = fb.group({});
            this.forms.addControl(classificationId, stepFormGroup);
            this.fields = fields;
            return fb.group(fb.array(fields))
}
    }
getClassification(classificationId) {
return this.gbtStepForm.find(classification => classification.classificationId === classificationId);
}
getClassificationForm(classificationId) {
 return this.forms.get(classificationId) as FormGroup
}

组件.ts

ngOnInit() {

this.router.navigateByUrl('旅游信息'); 这个 service.createForms('travel-information'); } next() {
// 检查是否有效 console.log(this.formService.forms.status) if(this.formService.forms.status === 'VALID') { // 导航到下一个路由器并使用 thenext形成 this.router.navigateByUrl('immigration'); } }

component.html 有以下代码

    <div class="wizard-step-container" *ngIf="formService.forms">
      <form [formGroup]="formService.getClassificationForm(classificationId)">
        <formly-form [fields]="formService.fields" [model]="formService.model" [form]="formService.getClassificationForm(classificationId)"></formly-form>
      </form>
    </div>
<button (click)="next()">
                    <span>Next</span>
                   
                </button>

createForms()这个getClassificationForm()功能实现是否正确？请提出您的意见。谢谢

标签： angularangular-reactive-formsangular-formsangular-formly