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$">
<ul>
<li style="font-size:20px"><strong> {{ details.cliente }}</strong></li>
<br>
<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>
</ul>
</div>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>
<br>
<br>
<div class="container" width="100%">
<div class="col l6">
<mz-input-container>
<i mz-icon-mdi mz-input-prefix [icon]="'calculator-variant'">
</i>
<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">
</mz-input-container>
</div>
<button mz-button [flat]="true" type="submit">Enviar</button>
<button mz-button [flat]="true" mz-modal-close>Volver</button>
</form>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_cont: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() {
this.data.getDetails(this.details$).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
}
console.log(myPostObject);
this.http.put(this.url, myPostObject)
.subscribe(response => {
console.log(response);
},(err: HttpErrorResponse) => {
console.log(err);
});
}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 ???