具有远程元数据的 Angular2 动态表单

Question

我按照 angular cookbook 中的说明创建了一个动态表单，然后我尝试使用我数据库中的元数据创建该表单。

我向获取字段类型、名称、ID 等发出了 HTTP 请求，但是当我尝试按照 angular 示例构建表单时，没有任何反应，或者我在控制台上收到错误消息。

这是教程中的代码：

export class AppComponent { 
    questions: any[]; 
    constructor(service: QuestionService) { 
        this.questions =  service.getQuestions(); 
    } 
}

这就是我所做的：

export class AppComponent implements OnInit {
  campos: any[] = [];
  constructor(private servico: FormDadosService) {}
  ngOnInit() {
    this.servico.getCampos().subscribe(this.processaCampos);
  }
  processaCampos(dados) {
    for (let i = 0; i < dados.length; i++) {
      this.campos.push(new CampoBase({
        nome: dados[i].ZI2_NOME,
        label: dados[i].ZI2_DESC,
        ordem: dados[i].ZI2_ORDEM,
        obrigatorio: dados[i].ZI2_OBRIGAT,
        tamanho: dados[i].ZI2_TAM,
        valor: '',
        tipoCampo: dados[i].ZI2_TIPO
      }))
    }
  }
}

我收到此错误：

error_handler.js:50EXCEPTION: Cannot read property 'push' of undefined

我想我需要知道一种在所有有关表单的数据从我的 HTTP 请求到达后呈现表单的方法。

Answer 1

我是这样操作的：

export class AppComponent implements OnInit {

  campos: any[] = [];

  constructor(private servico: FormDadosService) { }

  ngOnInit() {
    this.servico.getCampos().subscribe((data) => {
      data.forEach(campo => {
        this.campos.push(new CampoBase({
          valor:     '',
          nome:      campo.ZI2_CAMPO,
          label:     campo.ZI2_DESC,
          tipoCampo: campo.ZI2_TIPO,
          tamanho:   campo.ZI2_TAM
        }))
      });
    });
  }
}

这个问题可以标记为已解决。

谢谢大家

具有远程元数据的 Angular2 动态表单

Angular2 dynamic form with remote metadata

forms

metadata

dynamic

angular2-forms

angular