使用Angular 6从JSON加载动态表单

Question

我将使用链接https://angular.io/guide/dynamic-form创建Angular 6动态表单。

在这里，我在question.service.ts中提供了以下内容：

 getQuestions() {

    let questions: DynamicBase<any>[] = [

      new TextboxQuestion({
        key: 'firstName',
        label: 'First name',
        type: 'text',
        value: '',
        required: true,
        order: 1
      }),

      new TextboxQuestion({
        key: 'emailAddress',
        label: 'Email',
        type: 'email',
        order: 2
      }),

      new DropdownQuestion({
        key: 'brave',
        label: 'Bravery Rating',
        options: [
          {key: 'solid',  value: 'Solid'},
          {key: 'great',  value: 'Great'},
          {key: 'good',   value: 'Good'},
          {key: 'unproven', value: 'Unproven'}
        ],
        order: 4
      }),
    ];

    return questions.sort((a, b) => a.order - b.order);
}

在这里，不是使用

。

  new TextboxQuestion({
    key: 'firstName',
    label: 'First name',
    type: 'text',
    value: '',
    required: true,
    order: 1
  }),

我想从JSON中加载数据，

"dynamicJSON": [
    {
        "key": "role_name",
        "label": "Role Name",
        "type": "text",
        "value": "",
        "required": true,
        "order": 1
    },
    {
        "key": "last_ame",
        "label": "Last Name",
        "type": "text",
        "value": "",
        "required": true,
        "order": 2
    }
]

我使用了以下内容：

我使用了以下内容：

    let newArray = dynamicJSON;

    let questions: DynamicBase<any>[] = [    

    newArray.forEach(element => { 
        new TextboxQuestion(element)
    });

    ];

    return questions.sort((a, b) => a.order - b.order);

当element在控制台中显示值时，

{key: "role_name", label: "Role Name", type: "text", value: "", required: true, …}

但是我遇到了“未定义的键”错误。当我控制台输出questions时，也显示为[undefined]。

如何将动态JSON值传递到表单对象中，例如文本框？请帮助我解决这个问题，已经卡了很久了。

- Maniraj Murugan

---

你可以使用以下代码将数组推入新数组并对其执行其他操作：json.Results.forEach(element => { newArray.push(element.Id); }); - Vaibhav Kumar Goyal

Answer 1

我创建了一个示例应用程序，它根据您的动态JSON生成带验证的表单。请参考 Stackblitz 示例：reactive form dynamic validation。

我实现了最短（代码最少）的方法来生成动态表单。

以下是组件代码：

ngOnInit(){
    this.sortDynamicJson();
    this.questionFormGroup = this.formBuilder.group({
      questions:this.formBuilder.array([])
    })
    this.generateForm()
  }

  generateForm(){
    this.dynamicJSON.forEach(t=>{
      let questions =<FormArray> this.questionFormGroup.controls["questions"]; 
     questions.push(this.formBuilder.group({
       value:[t.value,[t.required ? Validators.required:null]]
     }))
    })
  }

如您所见，我已经使用value属性生成了FormGroup，因为其他属性与表单无关。

现在我已经在HTML中应用了dynamicJSON数组对象的循环，并绑定了表单。

以下是HTML代码：

<form >
  <div [formGroup]="questionFormGroup.controls.questions.controls[i]" *ngFor="let row of dynamicJSON; let i = index;">
<div class="form-group">
    <label>{{row.label}}</label>
    <input type="text" formControlName="value" class="form-control"  />
</div>
</div>
<<button [disabled]="!questionFormGroup.valid" class="btn btn-primary">Submit</button>

如果您有任何问题，请告诉我。

- Ajay Ojha

Answer 2

您没有将TextboxQustion对象推入questions数组中。我在stackblitz上创建了一个示例，请检查。

以下是ts代码。

let newArray = this.dynamicJSON;

    let questions: any = [    ]

    newArray.forEach(element => { 
        questions.push(element)
    });


    questions.sort((a, b) => a.order - b.order);

- Ajay Ojha

---

感谢您的帮助。您能否在提供的示例中，至少生成一个文本框。因为我只得到了标签和必填字段消息。如果您生成一个文本框，那将会更有帮助。 - Maniraj Murugan

好的，我会在一段时间后更新您，表单中是否还需要其他动态验证或只是必填项？ - Ajay Ojha

Ajay，我是Angular和动态表单的新手，请帮助我摆脱困境。根据我的理解，我已经按照问题中的要求开发了上述内容。需求是我需要使用动态表单创建一个文本框、单选按钮、下拉框的示例，并且这些值需要来自于动态JSON，目前我有这个需求。如果需要任何信息，我会更新给你。我请求您使用动态表单从JSON中仅生成文本框、单选按钮和下拉框。请帮帮我。 - Maniraj Murugan

我已经分享了两种最佳解决方案来进行动态JSON验证，请让我知道如果您对其中一种解决方案有任何问题，哪种最适合您的应用程序。 - Ajay Ojha

Ajay，感谢您宝贵的时间。但是那两个新解决方案并不符合我的期望。我期望的是我发布的旧解决方案和第一个答案（本评论的答案）的修改。我也不应该在项目中添加任何第三方插件。我知道动态表单是响应式表单的一部分，但我需要仅在Angular动态表单中使用所有内容。使用此答案，您可以修改相同的动态表单，并在视图中仅给出文本框，复选框，单选按钮的结果吗？ - Maniraj Murugan