Formgroup does not take default values

Question

The proposal of this page would be to update my database, however, the form is only considering the changed values, that is, if any field is not changed in the form this will be changed to '' (empty) in the base.

I made a formgroup and set in the values property of the fields the value of my JSON result. Follow the codes of both components.

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    
}

My main question is, are Formgroups the best way to make this page? Otherwise, what other method should I use?

Thank you in advance!

Answer 1

you have to set the value through typescript:

this.cadastroForm.setValue(seuJson);

Answer 2

You must set the value in the form via Typescript, not via template.

(Use patchValue, if the JSON object is different from the form, there will be no error, if you use Setvalue, an error would occur.)

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

This has no effect on the form data:

value="{{planilha.COMERCIAL}}"