set value of an object traversed by ng for, to a ng form in a hidden input in angular 7


I have a problem to pass the value of an object to an input of type hidden in an angular form, to be more exact, I have a modal in which I have a form to update a table, the problem is with NgModels and NgForms managed to send the body to my API, but I also need to dynamically send the row Id, the data is already created and I only have to update some changes, therefore, I do not directly create a row (not inserted) so the field "id_cert" is in null, it occurred to me to send the data (I'm listing the rows in the same component of the form), to get the id_cert of the object where I want to update, but unfortunately I can not pass the value of the form to my data service, it appears in null. My code would be the following:

This is the object that I'm going through

 <div class="col l6" *ngFor="let details of details$">
          <li style="font-size:20px"><strong> {{ details.cliente }}</strong></li>
          <li><strong>OC:</strong> {{ details.OC }}</li>
          <li><strong>Codigo VyG:</strong> {{ details.cod_producto }}</li>
          <li><strong>Codigo Cliente:</strong> {{ details.cod_cliente_prod }}</li>
          <li><strong>Nro Documento:</strong> {{ details.Documento_despacho }}</li>
          <li><strong>Producto:</strong> {{ details.producto }}</li>
          <li><strong>Cantidad:</strong> {{ details.Cantidad }}</li>
          <li><strong>Cartulina:</strong> {{ details.Cartulina }}</li>
          <li><strong>Colores:</strong> {{ details.Colores }}</li>
          <li><strong>Gramaje:</strong> {{ details.gramaje }}</li>
          <li><strong>Fecha Elaboración: </strong>{{ details.Fecha_elaboracion | date: "dd/MM/yyyy" }} </li>
          <li><strong>Fecha Vencimiento: </strong> {{ details.fecha_Vencimiento | date: "dd/MM/yyyy" }}</li>
          <li><strong>Fecha Despacho: </strong> {{ details.Fecha_Despacho | date: "dd/MM/yyyy" }}</li>

This is a fragment of the form since it is giant, but all the inputs are the same:

<form #formData="ngForm" (submit)="onSubmit(formData);" >
 <input mz-input type="hidden" name="gramaje_total_est" ngModel #gramaje_total_est="ngModel" value="{{details.ide_cert}}"> <!-----Aqui es donde quiero pasar el valor de id_cert--->
<div class="row">
<div class="col l12">
<span class="titulo"> Gramaje total</span>
<div class="container" width="100%">

<div class="col l6">
<i mz-icon-mdi mz-input-prefix [icon]="'calculator-variant'">
<input mz-input [label]="'Valor Estándar (gr/m²)'" [validate]="true" [dataError]="'Number is invalid'"
name="gramaje_total_est" ngModel #gramaje_total_est="ngModel"
[dataSuccess]="'Number is valid'" id="Number-input" placeholder="Gramaje total" min="0" type="number">
<button mz-button [flat]="true" type="submit">Enviar</button>
<button mz-button [flat]="true" mz-modal-close>Volver</button>

MY component

export class DetailsComponent implements OnInit {

  id_cert : any[];
  gramaje_total_cont: any[];
  gramaje_total_est: any[];
  espesor_cont: any[];
  espesor_est: any[];
  largo_fondo_est: any[];
  ancho_cont: any[];
  ancho_est: any[];
  alto_cont: any[];
  alto_est: any[];
  largura_cont: any[];
  largura_est: any[];
  anchura_cont: any[];
  anchura_est: any[];

    private url = 'http://localhost:5000/json/certificados/update/'+this.id_cert;

  details$: Object;

  constructor(private data: DataService, private route: ActivatedRoute, private http: HttpClient) {
    this.route.params.subscribe(params => this.details$ = params.op)

  ngOnInit() {$).subscribe(
      data => this.details$ = data


  onSubmit(formData: NgForm) {
   var data = formData.value;
        var myPostObject = {     
              id_cert : data.id_cert,
              gramaje_total_cont: data.gramaje_total_cont,
              gramaje_total_est: data.gramaje_total_est,
              espesor_cont: data.espesor_cont,
              espesor_est: data.espesor_est,
              largo_fondo_cont: data.largo_fondo_cont,
              largo_fondo_est: data.largo_fondo_est,
              ancho_cont: data.ancho_cont,
              ancho_est: data.ancho_est,
              alto_cont: data.alto_cont,
              alto_est: data.alto_est,
              largura_cont: data.largura_cont,
              largura_est: data.largura_est,
              anchura_cont: data.anchura_cont,
              anchura_est: data.anchura_est
        this.http.put(this.url, myPostObject)
        .subscribe(response => {
        },(err: HttpErrorResponse) => {

At the end I'm obviously wrong because id_cert comes to me in NULL ...

probe entering the ID_cert manually for an input and update me without problems ...

Any ideas ???

asked by Jordan Blake Told 21.11.2018 в 21:08

0 answers