Angular 4 - 使用 JSON 数据填充表单不起作用

Question

我必须编辑来自客户端的数据。我有一个表单，在其中单击一个按钮并重定向到一个表单，我希望它显示我刚刚单击的该客户端的数据。\n事实是，当我尝试将每个键与其值关联时，表单生成器不起作用。

\n\n

但是，如果我自己写下名称（例如硬编码），则表单生成器的工作方式就像一个魅力！

\n\n

编辑组件.ts

\n\n

import { FuncionForm } from \'./../../interfaces/funcion_form\';\nimport { FuncionService } from \'./../../services/funcion.service\';\nimport { Combobox } from \'./../../interfaces/combobox\';\nimport { ComboboxService } from \'./../../services/combobox.service\';\nimport { Formulario } from \'./../../interfaces/formulario\';\nimport { HttpClient } from \'@angular/common/http\';\nimport { SharedService } from \'./../../services/shared-service.service\';\nimport { Component, OnInit } from \'@angular/core\';\nimport { Funcion } from \'../../interfaces/funcion\';\nimport {\n  FormGroup,\n  Validators,\n  FormBuilder,\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule\n} from \'@angular/forms\';\n\n@Component({\nselector: \'app-editar-funcion\',\ntemplateUrl: \'./editar-funcion.component.html\',\nstyleUrls: [\'./editar-funcion.component.css\']\n})\nexport class EditarFuncionComponent implements OnInit {\n\nfuncionCD:                number;\ndadosFormulario :         FuncionForm;\nfuncionFormGroup:         FormGroup;\ncomboboxProfisArray :     Combobox;\ncomboboxAgrupProfArray :  Combobox;\ncomboboxAgrupCategArray : Combobox;\ncomboboxNacionArray :     Combobox;\nmyForm :                  FormGroup;  \n\n constructor(private sharedService : SharedService,\n          private funcionService : FuncionService,\n          private funcionFormBuilder: FormBuilder,\n          private comboboxService: ComboboxService) \n {}\n\nngOnInit() { \n\nthis.sharedService.currentClientCD.subscribe(message => this.funcionCD = message); // Service to get the client ID\n\nthis.funcionService.GetDadosCliente(this.funcionCD).subscribe(\n  (res:FuncionForm) => {\n    this.dadosFormulario = res; // Interface to define a client\n\n\n// This works!\nthis.myForm = new FormGroup({ \n  nome :          new FormControl("A name"),\n  dt_nasc :       new FormControl("1998-02-25"),\n  sexo :          new FormControl("0"),\n  cd_nacion :     new FormControl("PT"),\n  cd_agrup_prof : new FormControl("M"),\n  cd_profis :     new FormControl("M"),\n  cd_categ :      new FormControl("M"),\n  loc_trab :      new FormControl("A company") \n  // This works!\n\n  /* This doesn\'t!\n this.myForm = new FormGroup({ \n  nome :          new FormControl(this.dadosFormulario[0].nome),\n  dt_nasc :       new FormControl(this.dadosFormulario[0].dt_nasc),\n  sexo :          new FormControl(this.dadosFormulario[0].sexo),\n  cd_nacion :     new FormControl(this.dadosFormulario[0].cd_nacion),\n  cd_agrup_prof : new FormControl(this.dadosFormulario[0].cd_agrup_prof),\n  cd_profis :     new FormControl(this.dadosFormulario[0].cd_profis),\n  cd_categ :      new FormControl(this.dadosFormulario[0].cd_categ),\n  loc_trab :      new FormControl(this.dadosFormulario[0].loc_trab) \n   */\n\n })      \n}\n

\n\n

编辑组件.html

\n\n

<div class="container">\n <h1>Editar dados do funcion\xc3\xa1rio</h1>\n <hr>\n <div class="card">\n <div class="container">\n  <div class="row">\n    <div class="col-md-3" id="col-img">\n        <img src="/img/1">\n    </div>\n    <div class="col-md-9" id="col-dados">\n      <form class="form-horizontal" role="form" [formGroup]="myForm">\n\n      <!-- \n        <div class="form-group row">\n          <label class="col-md-12 col-form-label">Local de trabalho</label>\n            <div class="col-md-12">\n              <input formControlName="loc_trab" type="text" class="form-control">\n            </div>\n        </div>\n      -->\n        <div class="form-group row">\n        <label class="col-md-12 col-form-label">Nome</label>\n          <div class="col-md-12">\n            <input formControlName="nome" type="text" class="form-control">\n          </div>\n        </div>\n\n        <div class="form-group row">\n        <label class="col-md-12 col-form-label">Data de nascimento</label>\n          <div class="col-md-12">\n            <input formControlName="dt_nasc" type="date" class="form-control">\n          </div>\n        </div>\n\n        <div class="form-group row">\n          <label class="col-md-12 col-form-label">G\xc3\xa9nero</label>\n          <div class="col-md-12">\n            <select formControlName="sexo" type="text" class="form-control">\n              <option value="0">Masculino</option>\n              <option value="1">Feminino</option>\n            </select>\n          </div>\n        </div>\n\n        <div class="form-group row">\n          <label class="col-md-12 col-form-label">Nacionalidade</label>\n          <div class="col-md-12">\n            <select formControlName="cd_nacion" type="text" class="form-control">\n              <option *ngFor="let row of comboboxNacionArray" value="{{ row.cd }}">{{ row.nome }}</option>\n            </select>\n          </div>\n        </div>\n\n        <div class="form-group row">\n          <label class="col-md-12 col-form-label">Agrupamento Profissional</label>\n          <div class="col-md-12">\n            <select formControlName="cd_agrup_prof" type="text" class="form-control">\n              <option *ngFor="let row of comboboxAgrupProfArray" value="{{ row.cd }}">{{ row.nome }}</option>\n            </select>\n          </div>\n        </div>\n\n        <div class="form-group row">\n          <label class="col-md-12 col-form-label">Profiss\xc3\xa3o</label>\n          <div class="col-md-12">\n            <select formControlName="cd_profis" type="text" class="form-control">\n              <option *ngFor="let row of comboboxProfisArray" value="{{ row.cd }}">{{ row.nome }}</option>\n            </select>\n          </div>  \n        </div>\n\n        <div class="form-group row">\n          <label class="col-md-12 col-form-label">Categoria Profissional</label>\n          <div class="col-md-12">\n            <select formControlName="cd_categ" type="text" class="form-control">\n              <option *ngFor="let row of comboboxAgrupCategArray" value="{{ row.cd }}">{{ row.nome }}</option>\n            </select>\n          </div>\n        </div>\n\n        <div class="form-group row">\n          <label class="col-md-12 col-form-label">Local de trabalho</label>\n          <div class="col-md-12">\n            <input formControlName="loc_trab" type="text" class="form-control">\n          </div>\n        </div>\n\n        <div class="form-group row">\n          <div class="col-md-12" style="padding-top: 15px;">\n              <button style="border-radius: 50px; float:right;" type="submit" class="btn btn-primary">Submeter</button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</div>\n

\n\n

\n

\n\n

一些截图

\n\n

在职的

\n\n

不工作

\n\n

我到处搜索但找不到解决方案。\n感谢所有帮助！

\n\n

PS：JSON数据是这样的。这就是为什么其中的“0”这就是为什么this.dadosFormulario[0]

\n\n

[\n  {\n    "nome": "MY NAME",\n    "dt_nasc": "1978-05-26T00:00:00",\n    "sexo": "0",\n    "cd_nacion": "2", \n    "cd_agrup_prof": null,\n    "cd_profis": "1",\n    "cd_categ": "TS",\n    "loc_trab": ""\n   }\n ] \n

\n

Answer 1

FormGroup 实例有两种方法可以预填充数据。setValue()＆patchValue()。收到服务器的响应后，只需使用这些方法之一设置/修补值setValue()，并且都设置中的patchValue()值。 设置 FormGroup 的每个表单控件的值。您不能省略任何表单控件，但如果您只想分配 FormGroup 的少数表单控件，那么您可以使用form controlFormGroupsetValue()setValue()patchValue().

修改代码

ngOnInit() { 
    this.initializeForm();
    this.sharedService.currentClientCD.subscribe(message => this.funcionCD = message); // Service to get the client ID

    this.funcionService.GetDadosCliente(this.funcionCD).subscribe(
      (res:FuncionForm) => {
        this.dadosFormulario = res; // Interface to define a client

    this.myForm.setValue(
     {

        nome :      this.dadosFormulario[0].nome,
        dt_nasc :      this.dadosFormulario[0].dt_nasc,
        sexo :         this.dadosFormulario[0].sexo,
        cd_nacion :     this.dadosFormulario[0].cd_nacion,
        cd_agrup_prof : this.dadosFormulario[0].cd_agrup_prof,
        cd_profis :     this.dadosFormulario[0].cd_profis,
        cd_categ :      this.dadosFormulario[0].cd_categ,
        loc_trab :      this.dadosFormulario[0].loc_trab
    })

    });


initializeForm()
        {
            this.myForm = new FormGroup({ 
                nome :          new FormControl(),
                dt_nasc :       new FormControl(),
                sexo :          new FormControl(),
                cd_nacion :     new FormControl(),
                cd_agrup_prof : new FormControl(),
                cd_profis :     new FormControl(),
                cd_categ :      new FormControl(),
                loc_trab :      new FormControl() 
        }