Angular 4 - заполнение формы данными JSON не работает - PullRequest
Новая
       1

Angular 4 - заполнение формы данными JSON не работает

0 голосов
/ 22 мая 2018

Я должен редактировать данные с клиента.У меня есть форма, в которой я нажимаю кнопку и перенаправляет на форму, в которой я хочу, чтобы она отображала данные того клиента, на которого я только что нажал.Дело в том, что построитель форм не работает, когда я пытаюсь связать каждый ключ с его значением.

Однако, если я сам записываю имя, например, в жестком коде, построитель форм работает как шарм!.

edit-component.ts 

import { FuncionForm } from './../../interfaces/funcion_form';
import { FuncionService } from './../../services/funcion.service';
import { Combobox } from './../../interfaces/combobox';
import { ComboboxService } from './../../services/combobox.service';
import { Formulario } from './../../interfaces/formulario';
import { HttpClient } from '@angular/common/http';
import { SharedService } from './../../services/shared-service.service';
import { Component, OnInit } from '@angular/core';
import { Funcion } from '../../interfaces/funcion';
import {
  FormGroup,
  Validators,
  FormBuilder,
  FormControl,
  FormsModule,
  ReactiveFormsModule
} from '@angular/forms';

@Component({
selector: 'app-editar-funcion',
templateUrl: './editar-funcion.component.html',
styleUrls: ['./editar-funcion.component.css']
})
export class EditarFuncionComponent implements OnInit {

funcionCD:                number;
dadosFormulario :         FuncionForm;
funcionFormGroup:         FormGroup;
comboboxProfisArray :     Combobox;
comboboxAgrupProfArray :  Combobox;
comboboxAgrupCategArray : Combobox;
comboboxNacionArray :     Combobox;
myForm :                  FormGroup;  

 constructor(private sharedService : SharedService,
          private funcionService : FuncionService,
          private funcionFormBuilder: FormBuilder,
          private comboboxService: ComboboxService) 
 {}

ngOnInit() { 

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 works!
this.myForm = new FormGroup({ 
  nome :          new FormControl("A name"),
  dt_nasc :       new FormControl("1998-02-25"),
  sexo :          new FormControl("0"),
  cd_nacion :     new FormControl("PT"),
  cd_agrup_prof : new FormControl("M"),
  cd_profis :     new FormControl("M"),
  cd_categ :      new FormControl("M"),
  loc_trab :      new FormControl("A company") 
  // This works!

  /* This doesn't!
 this.myForm = new FormGroup({ 
  nome :          new FormControl(this.dadosFormulario[0].nome),
  dt_nasc :       new FormControl(this.dadosFormulario[0].dt_nasc),
  sexo :          new FormControl(this.dadosFormulario[0].sexo),
  cd_nacion :     new FormControl(this.dadosFormulario[0].cd_nacion),
  cd_agrup_prof : new FormControl(this.dadosFormulario[0].cd_agrup_prof),
  cd_profis :     new FormControl(this.dadosFormulario[0].cd_profis),
  cd_categ :      new FormControl(this.dadosFormulario[0].cd_categ),
  loc_trab :      new FormControl(this.dadosFormulario[0].loc_trab) 
   */

 })      
}

edit-component.html 

<div class="container">
 <h1>Editar dados do funcionário</h1>
 <hr>
 <div class="card">
 <div class="container">
  <div class="row">
    <div class="col-md-3" id="col-img">
        <img src="/img/1">
    </div>
    <div class="col-md-9" id="col-dados">
      <form class="form-horizontal" role="form" [formGroup]="myForm">

      <!-- 
        <div class="form-group row">
          <label class="col-md-12 col-form-label">Local de trabalho</label>
            <div class="col-md-12">
              <input formControlName="loc_trab" type="text" class="form-control">
            </div>
        </div>
      -->
        <div class="form-group row">
        <label class="col-md-12 col-form-label">Nome</label>
          <div class="col-md-12">
            <input formControlName="nome" type="text" class="form-control">
          </div>
        </div>

        <div class="form-group row">
        <label class="col-md-12 col-form-label">Data de nascimento</label>
          <div class="col-md-12">
            <input formControlName="dt_nasc" type="date" class="form-control">
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-12 col-form-label">Género</label>
          <div class="col-md-12">
            <select formControlName="sexo" type="text" class="form-control">
              <option value="0">Masculino</option>
              <option value="1">Feminino</option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-12 col-form-label">Nacionalidade</label>
          <div class="col-md-12">
            <select formControlName="cd_nacion" type="text" class="form-control">
              <option *ngFor="let row of comboboxNacionArray" value="{{ row.cd }}">{{ row.nome }}</option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-12 col-form-label">Agrupamento Profissional</label>
          <div class="col-md-12">
            <select formControlName="cd_agrup_prof" type="text" class="form-control">
              <option *ngFor="let row of comboboxAgrupProfArray" value="{{ row.cd }}">{{ row.nome }}</option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-12 col-form-label">Profissão</label>
          <div class="col-md-12">
            <select formControlName="cd_profis" type="text" class="form-control">
              <option *ngFor="let row of comboboxProfisArray" value="{{ row.cd }}">{{ row.nome }}</option>
            </select>
          </div>  
        </div>

        <div class="form-group row">
          <label class="col-md-12 col-form-label">Categoria Profissional</label>
          <div class="col-md-12">
            <select formControlName="cd_categ" type="text" class="form-control">
              <option *ngFor="let row of comboboxAgrupCategArray" value="{{ row.cd }}">{{ row.nome }}</option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-12 col-form-label">Local de trabalho</label>
          <div class="col-md-12">
            <input formControlName="loc_trab" type="text" class="form-control">
          </div>
        </div>

        <div class="form-group row">
          <div class="col-md-12" style="padding-top: 15px;">
              <button style="border-radius: 50px; float:right;" type="submit" class="btn btn-primary">Submeter</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Некоторые скриншоты

Работает

Не работает

Я искал везде и не мог 'не могу найти решение.Вся помощь приветствуется!

PS: данные JSON появляются следующим образом.Вот почему "0" в this.dadosFormulario [0] 

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

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Для предварительного заполнения данных есть два метода экземпляра FormGroup.setValue() & patchValue().После получения ответа от сервера просто установите / исправьте значения, используя один из этих методов setValue(), и patchValue() оба устанавливают значение в form control из FormGroup.setValue() устанавливает значение для каждого элемента управления формы FormGroup.вы не можете опустить любой элемент управления формой в setValue(), но если вы хотите назначить только несколько элементов управления формой FormGroup, вы можете использовать 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() 
        }
0 голосов
/ 22 мая 2018

Ваш this.dadosFormulario будет нулевым в onNgOnit (), поэтому вы не видите никакого значения в форме.

Вам нужно использовать patchValue для обновления формы, как только вы получите данные из вашего funcionService

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...