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

Question

我正在使用链接创建 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 值？请帮助我摆脱它，困了很长时间..

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 中应用了动态 JSON 数组对象的循环并绑定(bind)了表单。

这是 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>

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