使用 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);

其中 element 在控制台中給出的值是，

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

但是，雖然我收到的錯誤是undefined .. 當我控制台問題也顯示為[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 中應用了 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>

如果您有任何問題，請告訴我。

Answer 2

您沒有在問題數組中推送 TextboxQustion 對象。 我已經在stackblitz上創建了示例示例，請檢查。

這是ts代碼。

let newArray = this.dynamicJSON;

    let questions: any = [    ]

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


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