Question

我正在使用链接https://angular.io/guide/dynamic-form

创建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);

其中where元素在控制台中给出的值为

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

但是，当我收到错误消息时，为未定义键。.当我控制台问题时，也会显示为 [未定义] .. < / p>

如何在文本对象（如文本框）内传递动态json值？请帮助我摆脱困境，坚持很长时间。

Answer 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);

Answer 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>

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

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

2 个答案: