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á!