From 8260928b08e040458bbde61396e7e711a2f84d47 Mon Sep 17 00:00:00 2001
From: mpuebla <mpuebla@focasoftware.com>
Date: Fri, 11 Oct 2019 15:03:20 -0300
Subject: [PATCH] agregadas validaciones a los inpus

---
 .../pago-con-tarjeta.component.html                | 89 +++++++++++++++++-----
 .../pago-con-tarjeta/pago-con-tarjeta.component.ts | 17 ++++-
 2 files changed, 83 insertions(+), 23 deletions(-)

diff --git a/src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.html b/src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.html
index 87e2d2a..e71f534 100644
--- a/src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.html
+++ b/src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.html
@@ -7,21 +7,24 @@
 </div>
 
 <div class="modal-body" id="modal-body">
+  <!-- TARJETAS -->
   <div class="w-75 mx-auto card-columns">
     <div
       class="card card-effect shadow-sm rounded-sm"
-      *ngFor="let tarjeta of tarjetas"
       [ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}"
-      (click)="seleccionarTarjeta(tarjeta)">
+      (click)="seleccionarTarjeta(tarjeta)"
+      *ngFor="let tarjeta of tarjetas">
       <img
         class="w-100 p-1"
         src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}">
     </div>
   </div>
+  <!-- FORMULARIO -->
   <div class="border-top w-75 mx-auto" *ngIf="showForm">
     <div class="row mt-2 fade-in">
-      <form class="col">
-        <div class="row py-3">
+      <form [formGroup]="form" class="col" novalidate>
+        <!-- TARJETA SELECCIONADA -->
+        <div class="row py-2">
           <div class="col-auto pr-1">
             <span class="font-weight-bold">{{tarjetaSeleccionada.ID}}</span>
           </div>
@@ -29,7 +32,8 @@
             <span class="font-weight-bold">{{tarjetaSeleccionada.NOM}}</span>
           </div>
         </div>
-        <div class="row pb-3">
+        <!-- IMPORTE -->
+        <div class="row pb-2">
           <div class="col-auto pr-1">
             <span>Importe</span>
           </div>
@@ -37,34 +41,76 @@
             <span class="font-weight-bold">{{ importeTotal | currency}}</span>
           </div>
         </div>
-        <div class="row pb-3">
-          <div class="col-auto pr-1 my-auto">
+        <!-- NUMERO TERMINAL -->
+        <div class="row pb-2">
+          <div class="col-auto pr-1">
             <span>Terminal Nº</span>
           </div>
           <div class="col-12 col-md-auto pl-md-1">
-            <input
-              class="form-control form-control-sm"
-              type="number">
+            <div class="input-group">
+              <input
+                formControlName="terminal"
+                class="form-control form-control-sm"
+                maxlength="45">
+            </div>
+            <p
+              *ngIf="form.get('terminal').errors?.required && form.get('terminal').dirty"
+              class="m-0 wobble-hor-bottom text-danger font-weight-light">
+              <small>Campo requerido*</small>
+            </p>
+            <p
+              *ngIf="form.get('terminal').errors?.pattern && form.get('terminal').dirty"
+              class="m-0 wobble-hor-bottom text-danger font-weight-light">
+              <small>Solo números*</small>
+            </p>
           </div>
         </div>
-        <div class="row pb-3">
-          <div class="col-auto pr-1 my-auto">
+        <!-- NUMERO DE CUPON -->
+        <div class="row pb-2">
+          <div class="col-auto pr-1">
             <span>Número de Cupón</span>
           </div>
           <div class="col-12 col-md-auto pl-md-1">
-            <input
-              class="form-control form-control-sm"
-              type="number">
+            <div class="input-group">
+              <input
+                formControlName="numeroCupon"
+                class="form-control form-control-sm"
+                maxlength="45">
+            </div>
+            <p
+              *ngIf="form.get('numeroCupon').errors?.required && form.get('numeroCupon').dirty"
+              class="m-0 wobble-hor-bottom text-danger font-weight-light">
+              <small>Campo requerido*</small>
+            </p>
+            <p
+              *ngIf="form.get('numeroCupon').errors?.pattern && form.get('numeroCupon').dirty"
+              class="m-0 wobble-hor-bottom text-danger font-weight-light">
+              <small>Solo números*</small>
+            </p>
           </div>
         </div>
-        <div class="row pb-3">
-          <div class="col-auto pr-1 my-auto">
+        <!-- CUOTAS -->
+        <div class="row pb-2">
+          <div class="col-auto pr-1">
             <span>Cuotas</span>
           </div>
           <div class="col-12 col-md-auto pl-md-1">
-            <input
-              class="form-control form-control-sm"
-              type="number">
+            <div class="input-group">
+              <input
+                formControlName="cuotas"
+                class="form-control form-control-sm"
+                maxlength="45">
+            </div>
+            <p
+              *ngIf="form.get('cuotas').errors?.required && form.get('cuotas').dirty"
+              class="m-0 wobble-hor-bottom text-danger font-weight-light">
+              <small>Campo requerido*</small>
+            </p>
+            <p
+              *ngIf="form.get('cuotas').errors?.pattern && form.get('cuotas').dirty"
+              class="m-0 wobble-hor-bottom text-danger font-weight-light">
+              <small>Solo números*</small>
+            </p>
           </div>
         </div>
       </form>
@@ -81,7 +127,8 @@
   </button>
   <button
     class="btn btn-sm btn-primary"
-    type="button">
+    type="button"
+    [disabled]="!form.valid">
     Guardar
   </button>
 </div>
diff --git a/src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.ts b/src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.ts
index 7f9552d..ac66d4a 100644
--- a/src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.ts
+++ b/src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap';
 import { TarjetasService } from 'src/app/services/tarjetas.service';
 import { Tarjeta } from 'src/app/wrappers/tarjeta';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-pago-con-tarjeta',
@@ -10,10 +11,11 @@ import { Tarjeta } from 'src/app/wrappers/tarjeta';
 })
 export class PagoConTarjetaComponent implements OnInit {
 
-  private tarjetas: Tarjeta[] = [];
-  private tarjetaSeleccionada: Tarjeta;
   private showForm = false;
   private importeTotal: number;
+  private tarjetas: Tarjeta[] = [];
+  private tarjetaSeleccionada: Tarjeta;
+  private form: FormGroup;
 
   constructor(
     private modalRef: BsModalRef,
@@ -27,6 +29,17 @@ export class PagoConTarjetaComponent implements OnInit {
 
         this.tarjetas = res;
       }, err => console.error(err));
+
+    this.setForm();
+  }
+
+  setForm() {
+
+    this.form = new FormGroup({
+      terminal: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
+      numeroCupon: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
+      cuotas: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
+    })
   }
 
   seleccionarTarjeta(tarjeta: Tarjeta) {
-- 
1.9.1