0

A proposta desta página seria realizar um update no meu banco, porém, o formulário só está considerando os valores alterados, ou seja, se algum campo não for alterado no formulário este será alterado para '' (vazio) na base.

Fiz um formgroup e setei na propriedade values dos campos o valor do meu JSON resultado. Segue os códigos de ambos componentes.

Typescript:

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {ActivatedRoute } from '@angular/router'
import {meuJson} from '../detalhes-planilha/interface.component'

import { DomAdapter } from '@angular/platform-browser/src/dom/dom_adapter';
import { JsonPipe } from '@angular/common';
import { load } from '@angular/core/src/render3';

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

  @Input('planilha') public planilha :meuJson[]
  public id:number = this.route.snapshot.params['id']

  constructor (private route: ActivatedRoute  ) {
    this.dao(this.id);
  }

  cadastroForm = new FormGroup({
    ID            : new FormControl(this.id), 
    CLIENTE       : new FormControl(''),   
    CODIGODMD     : new FormControl(''),
    SIGLARM       : new FormControl(''),
    SIGLAPORTAL   : new FormControl(''),
    COMERCIAL     : new FormControl(''),
    ATENDIMENTO   : new FormControl(''),
    AUDITORIA     : new FormControl(''),
    PERIODICIDADE : new FormControl(''),
    ENTREGA       : new FormControl(''),
    RESPONSAVEL   : new FormControl(''),
    LAYOUT        : new FormControl(''),
    DM            : new FormControl(''),
    ODSDM         : new FormControl(''),
    EFV           : new FormControl(''),
    CAMINHO       : new FormControl(''),
    ORIGEM        : new FormControl(''),
    PORTAL        : new FormControl(''),
    FTP           : new FormControl(''),
    OBSERVACAO    : new FormControl(''),
    MAILING       : new FormControl('')
    });

    dao(id){
      //CONEXAO COM A API
      async function getPlanilha()
      {
        const response = await fetch(`http://localhost:51230/api/logs/producao/plan/`+id);
        return await response.json();
      }

      //promisses
      getPlanilha()
        .then((planilha) => this.planilha = planilha)
        .then(()=> console.log(this.cadastroForm))
      }

      AtualizaBtn(){
        //this.AtualizaRegistro(this.cadastroForm.value);
      }

      AtualizaRegistro(corpo)
      {
        function reqListener () {

        };
        var oReq = new XMLHttpRequest();

        oReq.open("PUT", "http://localhost:51230/api/logs/plan/update", true);
        oReq.onload = reqListener;
        oReq.setRequestHeader('Content-Type', 'application/json');
        oReq.send(JSON.stringify(corpo));
      }

    ngOnInit() {

  }

}

HTML:

   <div *ngFor = 'let planilha of planilha'>

<div class="jumbotron">
    <div class="container">
        <h2 class="display-4"> <p align="center">Detalhes<IMG SRC= "./assets/todos.png" width="60px"/></p></h2>

      <form class="meuFormulario" [formGroup]="cadastroForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label for="exampleInputEmail1">Cliente</label>
            <input type="text" class="form-control" formControlName="CLIENTE" input = "id" value="{{planilha.CLIENTE}}"> 
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">CODIGO DMD</label>
            <input type="text" class="form-control" formControlName="CODIGODMD" value="{{planilha.CODIGODMD}}">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Sigla RM</label>
            <input type="text" class="form-control" formControlName="SIGLARM" value="{{planilha.SIGLARM}}">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Sigla Portal</label>
            <input type="text" class="form-control" formControlName="SIGLAPORTAL" value="{{planilha.SIGLAPORTAL}}">
          </div> 
          <div class="form-group">
            <label for="exampleInputPassword1">Comercial</label>
            <input type="text" class="form-control" formControlName="COMERCIAL" value="{{planilha.COMERCIAL}}">
          </div>
          <div class="form-group">
              <label for="exampleInputPassword1">Atendimento</label>
              <input type="text" class="form-control" formControlName="ATENDIMENTO" value="{{planilha.ATENDIMENTO}}">
          </div>  
          <div class="form-group">
              <label for="exampleInputPassword1">Auditoria</label>
              <input type="text" class="form-control" formControlName="AUDITORIA" value="{{planilha.AUDITORIA}}">
          </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">Periodicidade</label>
              <input type="text" class="form-control" formControlName="PERIODICIDADE" value="{{planilha.PERIODICIDADE}}">
          </div> 
          <div class="form-group">
            <label for="exampleInputPassword1">Entrega</label>
            <input type="text" class="form-control" formControlName="ENTREGA" value="{{planilha.ENTREGA}}">
        </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">Responsável</label>
              <input type="text" class="form-control" formControlName="RESPONSAVEL" value="{{planilha.RESPONSAVEL}}">
          </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">Layout</label>
              <input type="text" class="form-control" formControlName="LAYOUT" value="{{planilha.LAYOUT}}">
          </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">DM</label>
              <input type="text" class="form-control" formControlName="DM" value="{{planilha.DM}}">
          </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">ODSDM</label>
              <input type="text" class="form-control" formControlName="ODSDM" value="{{planilha.ODSDM}}">
          </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">EFV</label>
              <input type="text" class="form-control" formControlName="EFV" value="{{planilha.EFV}}">
          </div> 


          <div class="form-group">
              <label for="exampleInputPassword1">Caminho</label>
              <input type="text" class="form-control" formControlName="CAMINHO" value="{{planilha.CAMINHO}}">
          </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">Origem</label>
              <input type="text" class="form-control" formControlName="ORIGEM" value="{{planilha.ORIGEM}}">
          </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">Comercial</label>
              <input type="text" class="form-control" formControlName="COMERCIAL" value="{{planilha.COMERCIAL}}">
          </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">Portal</label>
              <input type="text" class="form-control" formControlName="PORTAL" value="{{planilha.PORTAL}}">
          </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">FTP</label>
              <input type="text" class="form-control" formControlName="FTP" value="{{planilha.FTP}}">
          </div> 
          <div class="form-group">
              <label for="exampleInputPassword1">Observação</label>
              <input type="text" class="form-control" formControlName="OBSERVACAO" value="{{planilha.OBSERVACAO}}">
          </div> 
          <div class="form-group">
            <label for="exampleInputPassword1">Mailing</label>
            <input type="text" class="form-control" formControlName="MAILING" value="{{planilha.MAILING}}">
           </div> 
          </form>
    </div>
    <button type="button" class="btn btn-primary" (click)="AtualizaBtn()" > Salvar Alterações</button>
  </div>
<!--routerLink="/plan"-->
</div>













<!--
<div class="form-group">
    <form class="meuFormulario" [formGroup]="cadastroForm" (ngSubmit)="onSubmit()">
    <label>
      First Name:
      <input type="text" formControlName="CLIENTE">
    </label>

    <label>
      Last Name:
      <input type="text" formControlName="AUDITORIA">
    </label>

  </form>
  <button type="button" class="btn btn-primary" (click)="ngSubmit()">Submit</button>

    -->

Meu Json:

export interface meuJson {
ID            :string,
CLIENTE       :string,
CODIGODMD     :string,
SIGLARM       :string,
SIGLAPORTAL   :string,
COMERCIAL     :string,
ATENDIMENTO   :string,
AUDITORIA     :string,
PERIODICIDADE :string,
ENTREGA       :string,
RESPONSAVEL   :string,
LAYOUT        :string,
DM            :string,
ODSDM         :string,
EFV           :string,
CAMINHO       :string,
ORIGEM        :string,
PORTAL        :string,
FTP           :string,
OBSERVACAO    :string,
MAILING       :string    
}

Minha dúvida principal é, os FormGroups são a melhor forma de se fazer esta página? Senão, que outro método devo utilizar?

Agradeço desde já!

2 Respostas 2

1

Você deve setar o valor no formulário via TypeScript, não via template.

(Use patchValue, caso o objeto JSON seja diferente do formulário, não dará erro, caso você use o SetValue, ocorreria um erro.)

      //promisses
      getPlanilha()
        .then((planilha) => this.cadastroForm.patchValue(planilha))
        .then(()=> console.log(this.cadastroForm))
      }

Isso não gera efeito algum nos dados do formulário:

value="{{planilha.COMERCIAL}}"
1
  • Funcionou! me esqueci só de declarar a posição do vetor, ja que chamei o meuJson como um objeto vetorial, this.planilha[0]. Obrigado! Commented 28/05/2019 às 12:21
1

vc tem que setar o valor através do typescript:

this.cadastroForm.setValue(seuJson);
1
  • Resolvido! Por conta da declaração do meu JSON de forma vetorial, ficou pendente a declaração da posição do vetor, ou seja: .then(() => this.cadastroForm.setValue(this.planilha[0])) Usei o método set Value nas minhas promisses, ficando da seguinte maneira: getPlanilha() .then((planilha) => this.planilha = planilha) .then(() => this.cadastroForm.setValue(this.planilha[0])) .then(()=> console.log(this.cadastroForm)) } Muito obrigado! Commented 28/05/2019 às 12:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .