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

【问题标题】：Loading dynamic form from JSON using angular 6使用 Angular 6 从 JSON 加载动态表单
【发布时间】：2019-04-04 09:08:04
【问题描述】：

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

这里我在 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);

其中元素在控制台中给出的值是，

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

但是我得到的错误是 key of undefined.. 当我控制台 questions 也显示为 [undefined]..

如何在文本框等表单对象中传递动态 json 值？请帮我摆脱它，卡了很长时间..

【问题讨论】：

你能不能把你的数组推入newarray，然后在上面做其他操作json.Results.forEach(element => { newArray.push(element.Id); });

标签： javascript angular typescript angular-reactive-forms angular-forms

【解决方案1】：

您没有在问题数组中推送 TextboxQustion 对象。我在stackblitz 上创建了示例示例，请检查。

这里是ts代码。

let newArray = this.dynamicJSON;

    let questions: any = [    ]

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


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

【讨论】：

感谢您的帮助。您能否在您提供的示例中生成至少一个文本框。因为使用它我只得到标签和必填字段消息..如果你生成一个文本框，那么它会更有帮助..
好的，我会在一段时间后更新您，表单中是否需要或只是需要任何其他动态验证？
Ajay，由于我是角度和动态形式的新手，请帮助我摆脱它。根据我的理解，我已经开发了上述问题。要求是我需要创建textbox, radio button, selectbox 使用动态表单的示例，并且该值也需要来自该动态 JSON，到目前为止，我有这个要求。如果有任何需要，我会更新你。我要求你单独生成文本框、收音机、选择框从 JSON 使用动态形式..请帮助我..
我分享了两个动态 JSON 验证的最佳解决方案，如果您对其中一个最适合您的应用程序的解决方案有任何疑问，请告诉我。
Ajay，感谢您宝贵的时间，但是这两个新的解决方案不是我所期望的。我发布的旧解决方案和第一个答案（此评论的答案）仅修改了我的预期..我也不应该在我的项目中添加任何第三方插件..我知道动态表单是反应式表单的一部分，但我需要单独使用角度动态表单中的所有内容..有了这个答案，你可以修改相同的动态表单和在视图中单独给出textbox, checkbox, radio button 的结果？

【解决方案2】：

我创建了一个示例应用程序，它根据您的动态 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>

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

【讨论】：