-1
I have an Angular/Typescript application on the frontend, in which it consumes the information of a Web Api, backend that was done in Asp.Net Core, this normal. My doubt is I have an HTML form, in which I have some calculations that I perform in javascript, in the "client", but when I send the form to the Webapi, the field that "null".
If the user enters the value, the data arrives in the Api. However, if I do the calculation by javascript, the value does not arrive.
I set the ng untouched directive for ng Touched and ng pristine for ng Dirty in html, but the problem persists.
Someone could steer what I can do ?
Att
Html
<input type="hidden" [(ngModel)]="produto.id" id="produto.id" name="produto.id" #produto.id="ngModel">
<div class="row">
<div class="col-sm">
<mat-form-field class="example-full-width">
<mat-label>Nome</mat-label>
<input matInput [(ngModel)]="produto.nome" id="produto.nome" name="produto.nome" #produto.nome="ngModel">
</mat-form-field>
</div>
<div class="col-sm">
<mat-form-field class="example-full-width">
<mat-label>Quantidade</mat-label>
<input matInput [(ngModel)]="produto.quantidade" id="produto.quantidade" name="produto.quantidade" #produto.quantidade="ngModel">
</mat-form-field>
</div>
<div class="col-sm">
<mat-form-field class="example-full-width">
<mat-label>Quantidade minina</mat-label>
<input matInput [(ngModel)]="produto.quantidademinima" id="produto.quantidademinima" name="produto.quantidademinina" #produto.quantidademinina="ngModel">
</mat-form-field>
</div>
<div class="col-sm">
<mat-form-field class="example-full-width">
<mat-label>Valor</mat-label>
<input matInput [(ngModel)]="produto.valor" id="produto.valor" name="produto.valor" #produto.valor="ngModel">
</mat-form-field>
</div>
<div class="col-sm">
<mat-form-field class="example-full-width">
<mat-label>Valor custo unitário</mat-label>
<input matInput [(ngModel)]="produto.valorcustounitario" id="produto.valorcustounitario" name="produto.valorcustounitario" #produto.valorcustounitario="ngModel" onblur="CalcularProduto()">
</mat-form-field>
</div>
<div class="col-sm">
<mat-form-field id="matvalorcustototal" class="example-full-width">
<mat-label>Valor custo total</mat-label>
<input matInput [(ngModel)]="produto.valorcustototal" id="produto.valorcustototal" name="produto.valorcustototal" #produto.valorcustototal="ngModel">
</mat-form-field>
</div>
<div class="col-sm">
<mat-form-field class="example-full-width">
<mat-label>Valor lucro unitário</mat-label>
<input matInput [(ngModel)]="produto.valorlucrounitario" id="produto.valorlucrounitario" name="produto.valorlucrounitario" #produto.valorlucrounitario="ngModel">
</mat-form-field>
</div>
<div class="col-sm">
<mat-form-field class="example-full-width">
<mat-label>Valor lucro total</mat-label>
<input matInput [(ngModel)]="produto.valorlucrototal" id="produto.valorlucrototal" name="produto.valorlucrototal" #produto.valorLucroTotal="ngModel">
</mat-form-field>
</div>
<div class="col-sm">
<mat-form-field class="example-full-width">
<mat-label>Valor bruto</mat-label>
<input matInput [(ngModel)]="produto.valorbruto" id="produto.valorbruto" name="produto.valorbruto" #produto.valorbruto="ngModel">
</mat-form-field>
</div>
<div class="col-sm">
<mat-form-field class="example-full-width">
<mat-label>Categoria</mat-label>
<input matInput [(ngModel)]="produto.idcategoria" id="produto.idcategoria" name="produto.idcategoria" #produto.idcategoria="ngModel">
</mat-form-field>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-sm btn-add-produto">Salvar</button>
<button type="reset" class="btn btn-secondary btn-sm btn-add-protudo" (click)="cleanForm(f)">Cancelar</button>
</div>
</form>
</div>
</div>
Javascript
function CalcularProduto() {
var quantidade = document.getElementById("produto.quantidade");
console.log(quantidade);
var valor = document.getElementById("produto.valor");
console.log(valor);
var custo = document.getElementById("produto.valorCustoUnitario");
console.log(custo);
var totalCusto = custo.value * quantidade.value;
console.log(totalCusto);
document.getElementById("produto.valorCustoTotal").value = totalCusto.toFixed(2);
var lucroUnitario = valor.value - custo.value;
document.getElementById("produto.valorLucroUnitario").value = lucroUnitario.toFixed(2);
var lucroTotal = lucroUnitario * quantidade.value;
document.getElementById("produto.valorLucroTotal").value = lucroTotal.toFixed(2);
var bruto = lucroTotal + totalCusto;
document.getElementById("produto.valorBruto").value = bruto.toFixed(2);
};
function moeda(a, e, r, t) {
let n = ""
, h = j = 0
, u = tamanho2 = 0
, l = ajd2 = ""
, o = window.Event ? t.which : t.keyCode;
if (13 == o || 8 == o)
return !0;
if (n = String.fromCharCode(o),
-1 == "0123456789".indexOf(n))
return !1;
for (u = a.value.length,
h = 0; h < u && ("0" == a.value.charAt(h) || a.value.charAt(h) == r); h++)
;
for (l = ""; h < u; h++)
-1 != "0123456789".indexOf(a.value.charAt(h)) && (l += a.value.charAt(h));
if (l += n,
0 == (u = l.length) && (a.value = ""),
1 == u && (a.value = "0" + r + "0" + l),
2 == u && (a.value = "0" + r + l),
u > 2) {
for (ajd2 = "",
j = 0,
h = u - 3; h >= 0; h--)
3 == j && (ajd2 += e,
j = 0),
ajd2 += l.charAt(h),
j++;
for (a.value = "",
tamanho2 = ajd2.length,
h = tamanho2 - 1; h >= 0; h--)
a.value += ajd2.charAt(h);
a.value += r + l.substr(u - 2, u)
}
return !1
}
Solution
Javascript
function CalcularProduto() {
var quantidade = document.getElementById("produto.quantidade");
var valor = document.getElementById("produto.valor");
var custo = document.getElementById("produto.valorcustounitario");
var totalCusto = custo.value * quantidade.value;
document.getElementById("produto.valorcustototal").value = totalCusto;
document.getElementById("produto.valorcustototal").setAttribute("ng-reflect-model", totalCusto);
var lucroUnitario = valor.value - custo.value;
document.getElementById("produto.valorlucrounitario").value = lucroUnitario
document.getElementById("produto.valorlucrounitario").setAttribute("ng-reflect-model", lucroUnitario);
var lucroTotal = lucroUnitario * quantidade.value;
document.getElementById("produto.valorlucrototal").value = lucroTotal
document.getElementById("produto.valorlucrototal").setAttribute("ng-reflect-model", lucroTotal);
var bruto = lucroTotal + totalCusto;
document.getElementById("produto.valorbruto").value = bruto
document.getElementById("produto.valorbruto").setAttribute("ng-reflect-model", bruto);
};
Typescript
import { Component, OnInit } from '@angular/core';
import { ProdutoService } from '../service/produto.service';
import { Produto } from '../models/produto.model';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-produto',
templateUrl: '../component/produto.component.html',
styleUrls: ['../component/produto.component.scss']
})
export class ProdutoComponent implements OnInit {
produtos: Produto[];
produto = {} as Produto;
constructor(private produtoService: ProdutoService) {}
ngOnInit() {
this.getProdutos();
}
onSubmit(form: NgForm) {
console.log(form.value);
console.log(this.produto);
}
//Selecionar todos os produtos
public getProdutos() {
return this.produtoService.getProdutos().subscribe(
produtos => { this.produtos = produtos; },
err => { console.log('Erro ao listar produtos', err);}
)
};
//Deletar um produto
public deleteProduto(produto: Produto) {
this.produtoService.deleteProduto(produto).subscribe(() => {
this.getProdutos();
});
}
//Adicionar produto
public addProduto(form: NgForm) {
let pvct = document.getElementById("produto.valorcustototal").getAttribute("ng-reflect-model");
let pvlu = document.getElementById("produto.valorlucrounitario").getAttribute("ng-reflect-model");
let pvlt = document.getElementById("produto.valorlucrototal").getAttribute("ng-reflect-model");
let pvb = document.getElementById("produto.valorbruto").getAttribute("ng-reflect-model");
this.produto.valorcustototal = pvct;
this.produto.valorlucrounitario = pvlu;
this.produto.valorlucrototal = pvlt;
this.produto.valorbruto = pvb;
if (this.produto.id !== undefined) {
this.produtoService.updateProduto(this.produto).subscribe(() => {
this.cleanForm(form);
window.location.reload();
});
} else {
this.produtoService.addProduto(this.produto).subscribe(() => {
this.cleanForm(form);
window.location.reload();
});
}
}
//Limpar formulário de produto
public cleanForm(form: NgForm) {
this.getProdutos();
form.resetForm();
}
//Editar produto
editProduto(produto: Produto) {
this.produto = { ...produto };
}
}
I set the reflect-model attribute in HTML, and in Typescript I pass the value to obj THIS.
But if you’re using Angular The function is in Vanilla?
– LeAndrade
Because I am doing the calculation without request, type the user will enter the value and quantity, when leaving the field "Blur()" he makes the calculation
– Rodrigo Furlaneti
Rodrigo or I did not understand the question or she is without any connection. If the function is in Vanilla and is executed in the event onblur how you want your model to be already filled by the function values?
– LeAndrade
Then, the function fills the "value" of the HTML element, but when I give the form SUBMIT, in the MODEL does not take the value, this attribute is in undefined state. Exit the UNDEFINED angular application and in the backend, NULL. I don’t know if I’m clear. Can we call? Att Rodrigo
– Rodrigo Furlaneti
You are trying to do it in a totally anti-standard Angular way, I recommend reading: https://angular.io/guide/forms#Introduction-to-template-driven-Forms
– veroneseComS
I’ll check here, thank you.
– Rodrigo Furlaneti
I got a friend.
– Rodrigo Furlaneti
@Rodrigofurlaneti succeeded, share your answer and mark it as solution, for future visitors to see that their question has been solved.
– Rafael Tavares