este es mi primero proyecto y me recomendaron usar angular , estoy tratando de hacer un formulario en el cual capte los datos solicitados y los deje en una table(grid ) y con el boton se guarde y posteriormente continuar guardar mas Despachos en este caso , estaba todo bonito hasta que llegue a usar los ngmodel , que no entiendo como unirlo con los datos de del formulario y los de la tabla(grid), de antemano muchas gracias si pudieran ayudarme intento rellenar los datos del formulario y lo que tengo entendido es qe asigandndole el ngmodel a ciertas variables puedo ahorrarme el getelementbyid entonces en eso estoy estancado ,
les dejo lo que llevo en el index y el ts
<div class="imgRow container-fluid">
<div class="row">
<div class="col-md-9">
<div class="chilexpress">
<img src="https://d31dn7nfpuwjnm.cloudfront.net/images/valoraciones/0030/0382/chilexpress-horarios-sucursales-region-metropolitana.png?1521706457" alt="">
</div>
</div>
<div class="col-md-3">
<div class="chilebox">
<img src="https://www.chilebox.cl/comounpro/images/logo.png"
alt="">
</div>
</div>
</div>
</div>
<div class="fondo " >
<div class="textTitle">
<h1>
Control de Despacho
</h1>
</div>
<div class="cont-texto container-fluid">
<div class="form Formulario">
<strong>Vuelo Master</strong>
<input type="text" id="Master" placeholder="Introduce numero de la Master" required class="form-control" name="vueloMaster" style="width: 49%;">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>Cliente :</strong>
<input type="text" id="nomCliente" placeholder="Introduce nombre de cliente" required class="form-control" name="Cliente">
</div>
<div class="form-group">
<strong>Cantidad Pre-Alerta :</strong>
<input type="text" id="preAlerta" placeholder="Introduce Cantidad de piezas en Pre-Alerta" required class="form-control" name="qPrealerta">
</div>
<div class="form-group">
<strong>Cantidad Manifestado :</strong>
<input type="text" id="pManifiesto" placeholder="Introduce Cantidad de piezas en manifiesto" required class="form-control" name="qManifstado">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Cantidad Retenido :</strong>
<input type="text" id="pRetenida" placeholder="Introduce Cantidad de piezas retenidas" required class="form-control" name="qRetenido">
</div>
<div class="form-group">
<strong>Cantidad Transferida :</strong>
<input type="text" id="pTransferida" placeholder="Introduce Cantidad de piezas transferidas" [(ngModel)]="cantTransferido" required class="form-control" name="qTransferido">
</div>
<div class="form-group">
<strong>Cantidad Despachado :</strong>
<input type="text" id="pDespachadas" placeholder="Introduce Cantidad de piezas despachadas" required class="form-control" [(ngModel)]="cantDespachado" name="qDespachada">
</div>
</div>
</div>
<input type="button" class="btnGuardar" name="" value="Guardar Despacho" (click)="Guardado()">
</div>
</div>
<table id="t01">
<tr>
<th>Vuelo Master</th>
<th>Cliente</th>
<th>Cantidad Pre-Alerta</th>
<th>Cantidad Manifiesto</th>
<th>Retenido</th>
<th>Cantidad Transferida</th>
<th>Cantidad Despachado</th>
</tr>
<tr>
<!-- <td>Valor</td>
<td>Valor</td>
<td>Valor</td>
<td>Valor</td>
<td>Valor</td>
<td>Valor</td>
<td>Valor</td> -->
<td>
<input [(ngModel)]="vMaster" type="text" class="form-control" value="{{campoMaster}}"/>
</td>
<td>
<input [(ngModel)]="cliente" type="text" class="form-control" value="{{campoCliente}}"/>
</td>
<td>
<input [(ngModel)]="cantPrealerta" type="text" class="form-control" value="{{campoPrealerta}}"/>
</td>
<td>
<input [(ngModel)]="cantManifestado" type="text" class="form-control" value="{{campoManifestado}}"/>
</td>
<td>
<input [(ngModel)]="cantRetenido" type="text" class="form-control" value="{{campoRetenido}}"/>
</td>
<td>
<input [(ngModel)]="cantTransferido" type="text" class="form-control" value="{{campoTransferido}}"/>
</td>
<td>
<input [(ngModel)]="cantDespachado" type="text" class="form-control" value="{{campoDespachado}}"/>
</td>
</tr>
<tr>
</tr>
</table>
</div>
import { Component, OnInit } from '@angular/core';
import {FormsModule} from '@angular/forms';
@Component({
selector: 'app-despacho',
templateUrl: './despacho.component.html',
styleUrls: ['./despacho.component.scss']
})
export class DespachoComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
public vMaster: string = '';
public cliente: string = '';
public cantPrealerta: number = 0;
public cantManifestado: string = '';
public cantRetenido: number = 0;
public cantTransferido: string = '';
public cantDespachado :number = this.cantPrealerta - this.cantRetenido ;
Guardado() {
// window.alert("Se guardo el despacho exitosamente");
var vMaster = campoMaster.values;
var cliente = campoCliente.values;
var vMaster = campoPrealerta.values;
var vMaster = campoManifestado.values;
var vMaster = campoRetenido.values;
var vMaster = [(ngModel)]="cantTransferido".values;
var vMaster = campoDespachado.values;
}
// vMaster='';
// cliente='';
// cantPrealerta='';
// cantManifestado='';
// cantRetenido='';
// cantTransferido='';
// cantDespachado= '';