Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 8260928b08e040458bbde61396e7e711a2f84d47

Authored by Marcelo Puebla
1 parent 6a61f21a9e
Exists in master and in 1 other branch validar_pve

agregadas validaciones a los inpus

Showing 2 changed files with 83 additions and 23 deletions   Show diff stats
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.html
Diff comments   View file @ 8260928
... ... @@ -7,21 +7,24 @@
7 7 </div>
8 8  
9 9 <div class="modal-body" id="modal-body">
  10 + <!-- TARJETAS -->
10 11 <div class="w-75 mx-auto card-columns">
11 12 <div
12 13 class="card card-effect shadow-sm rounded-sm"
13   - *ngFor="let tarjeta of tarjetas"
14 14 [ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}"
15   - (click)="seleccionarTarjeta(tarjeta)">
  15 + (click)="seleccionarTarjeta(tarjeta)"
  16 + *ngFor="let tarjeta of tarjetas">
16 17 <img
17 18 class="w-100 p-1"
18 19 src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}">
19 20 </div>
20 21 </div>
  22 + <!-- FORMULARIO -->
21 23 <div class="border-top w-75 mx-auto" *ngIf="showForm">
22 24 <div class="row mt-2 fade-in">
23   - <form class="col">
24   - <div class="row py-3">
  25 + <form [formGroup]="form" class="col" novalidate>
  26 + <!-- TARJETA SELECCIONADA -->
  27 + <div class="row py-2">
25 28 <div class="col-auto pr-1">
26 29 <span class="font-weight-bold">{{tarjetaSeleccionada.ID}}</span>
27 30 </div>
... ... @@ -29,7 +32,8 @@
29 32 <span class="font-weight-bold">{{tarjetaSeleccionada.NOM}}</span>
30 33 </div>
31 34 </div>
32   - <div class="row pb-3">
  35 + <!-- IMPORTE -->
  36 + <div class="row pb-2">
33 37 <div class="col-auto pr-1">
34 38 <span>Importe</span>
35 39 </div>
... ... @@ -37,34 +41,76 @@
37 41 <span class="font-weight-bold">{{ importeTotal | currency}}</span>
38 42 </div>
39 43 </div>
40   - <div class="row pb-3">
41   - <div class="col-auto pr-1 my-auto">
  44 + <!-- NUMERO TERMINAL -->
  45 + <div class="row pb-2">
  46 + <div class="col-auto pr-1">
42 47 <span>Terminal Nº</span>
43 48 </div>
44 49 <div class="col-12 col-md-auto pl-md-1">
45   - <input
46   - class="form-control form-control-sm"
47   - type="number">
  50 + <div class="input-group">
  51 + <input
  52 + formControlName="terminal"
  53 + class="form-control form-control-sm"
  54 + maxlength="45">
  55 + </div>
  56 + <p
  57 + *ngIf="form.get('terminal').errors?.required && form.get('terminal').dirty"
  58 + class="m-0 wobble-hor-bottom text-danger font-weight-light">
  59 + <small>Campo requerido*</small>
  60 + </p>
  61 + <p
  62 + *ngIf="form.get('terminal').errors?.pattern && form.get('terminal').dirty"
  63 + class="m-0 wobble-hor-bottom text-danger font-weight-light">
  64 + <small>Solo números*</small>
  65 + </p>
48 66 </div>
49 67 </div>
50   - <div class="row pb-3">
51   - <div class="col-auto pr-1 my-auto">
  68 + <!-- NUMERO DE CUPON -->
  69 + <div class="row pb-2">
  70 + <div class="col-auto pr-1">
52 71 <span>Número de Cupón</span>
53 72 </div>
54 73 <div class="col-12 col-md-auto pl-md-1">
55   - <input
56   - class="form-control form-control-sm"
57   - type="number">
  74 + <div class="input-group">
  75 + <input
  76 + formControlName="numeroCupon"
  77 + class="form-control form-control-sm"
  78 + maxlength="45">
  79 + </div>
  80 + <p
  81 + *ngIf="form.get('numeroCupon').errors?.required && form.get('numeroCupon').dirty"
  82 + class="m-0 wobble-hor-bottom text-danger font-weight-light">
  83 + <small>Campo requerido*</small>
  84 + </p>
  85 + <p
  86 + *ngIf="form.get('numeroCupon').errors?.pattern && form.get('numeroCupon').dirty"
  87 + class="m-0 wobble-hor-bottom text-danger font-weight-light">
  88 + <small>Solo números*</small>
  89 + </p>
58 90 </div>
59 91 </div>
60   - <div class="row pb-3">
61   - <div class="col-auto pr-1 my-auto">
  92 + <!-- CUOTAS -->
  93 + <div class="row pb-2">
  94 + <div class="col-auto pr-1">
62 95 <span>Cuotas</span>
63 96 </div>
64 97 <div class="col-12 col-md-auto pl-md-1">
65   - <input
66   - class="form-control form-control-sm"
67   - type="number">
  98 + <div class="input-group">
  99 + <input
  100 + formControlName="cuotas"
  101 + class="form-control form-control-sm"
  102 + maxlength="45">
  103 + </div>
  104 + <p
  105 + *ngIf="form.get('cuotas').errors?.required && form.get('cuotas').dirty"
  106 + class="m-0 wobble-hor-bottom text-danger font-weight-light">
  107 + <small>Campo requerido*</small>
  108 + </p>
  109 + <p
  110 + *ngIf="form.get('cuotas').errors?.pattern && form.get('cuotas').dirty"
  111 + class="m-0 wobble-hor-bottom text-danger font-weight-light">
  112 + <small>Solo números*</small>
  113 + </p>
68 114 </div>
69 115 </div>
70 116 </form>
... ... @@ -81,7 +127,8 @@
81 127 </button>
82 128 <button
83 129 class="btn btn-sm btn-primary"
84   - type="button">
  130 + type="button"
  131 + [disabled]="!form.valid">
85 132 Guardar
86 133 </button>
87 134 </div>
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.ts
Diff comments   View file @ 8260928
... ... @@ -2,6 +2,7 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
2 2 import { BsModalRef } from 'ngx-bootstrap';
3 3 import { TarjetasService } from 'src/app/services/tarjetas.service';
4 4 import { Tarjeta } from 'src/app/wrappers/tarjeta';
  5 +import { FormGroup, FormControl, Validators } from '@angular/forms';
5 6  
6 7 @Component({
7 8 selector: 'app-pago-con-tarjeta',
... ... @@ -10,10 +11,11 @@ import { Tarjeta } from &#39;src/app/wrappers/tarjeta&#39;;
10 11 })
11 12 export class PagoConTarjetaComponent implements OnInit {
12 13  
13   - private tarjetas: Tarjeta[] = [];
14   - private tarjetaSeleccionada: Tarjeta;
15 14 private showForm = false;
16 15 private importeTotal: number;
  16 + private tarjetas: Tarjeta[] = [];
  17 + private tarjetaSeleccionada: Tarjeta;
  18 + private form: FormGroup;
17 19  
18 20 constructor(
19 21 private modalRef: BsModalRef,
... ... @@ -27,6 +29,17 @@ export class PagoConTarjetaComponent implements OnInit {
27 29  
28 30 this.tarjetas = res;
29 31 }, err => console.error(err));
  32 +
  33 + this.setForm();
  34 + }
  35 +
  36 + setForm() {
  37 +
  38 + this.form = new FormGroup({
  39 + terminal: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
  40 + numeroCupon: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
  41 + cuotas: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
  42 + })
30 43 }
31 44  
32 45 seleccionarTarjeta(tarjeta: Tarjeta) {