0

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= '';

  


1 respuesta 1

2

Te agrego un ejemplo sencillo de como hacer la relación del modelo con el formulario y la tabla:

archivo .ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  // los datos se van guardando en un arreglo, el cual se usa para
  // desplegar la tabla
  personas:any[] = [];

  // los input del formulario se asocian con un modelo
  persona:any = {};


  guardar(){
    // se inserta el dato en el arreglo
    this.personas.push(this.persona);

    // se crea un nuevo objeto para almacenar nuevos datos
    this.persona = {};
  }
}

archivo .html

nombre: <input type="text" name="nombre" [(ngModel)]="persona.nombre"/><br/>
direccion: <input type="text" name="direccion"[(ngModel)]="persona.direccion"/><br>
<input type="button" value="guardar" (click)="guardar()"/>

<h4>datos ingresados</h4>

<table border="1">
  <tr *ngFor="let persona of personas">
    <td>{{persona.nombre}}</td>
    <td>{{persona.direccion}}</td>
  </tr>
</table>

Código stackblitz

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.