0

vengo aca con un problemita estoy haciendo una app en angular con una api en .net core con db Sql y tengo un error al momento que intento guardar la información de mi formulario al parecer no me reconoce los valores ingresados no se si me falto algo o si hay alguna otra forma de guardar los datos en la función, les comparto el html y el TS como tambien el error que me sale en la consola quedo atento de ante mano gracias

import {
  Component,
  OnInit
} from '@angular/core';
import {
  FormGroup,
  FormBuilder,
  Validators,
  FormControl
} from '@angular/forms';
import {
  TarjetaCredito
} from 'src/app/models/tarjetaCredito';
import {
  TarjetaService
} from 'src/app/services/tarjeta.service';
@Component({
  selector: 'app-tarjeta-credito',
  templateUrl: './tarjeta-credito.component.html',
  styleUrls: ['./tarjeta-credito.component.css']
})
export class TarjetaCreditoComponent implements OnInit {

  form: FormGroup | any;


  constructor(private formBuilder: FormBuilder, private tarjetaService: TarjetaService) {

    this.form = this.formBuilder.group({
      id: 0,
      titular: ["", [Validators.required]],
      numeroTarjeta: ["", [Validators.required, Validators.maxLength(16), Validators.minLength(16)]],
      fechaExpiracion: ["", [Validators.required, Validators.maxLength(5), Validators.minLength(5)]],
      cvv: ["", [Validators.required, Validators.maxLength(3), Validators.minLength(3)]]
    });


  }

  ngOnInit(): void {

  }

  guardarTarjeta() {
    const tarjeta: TarjetaCredito = {
      titular: this.form.get('titular').value,
      numeroTarjeta: this.form.get('numeroTarjeta').value,
      fechaExpedicion: this.form.get('fechaExpedicion').value,
      cvv: this.form.get('cvv').value


    }
    this.tarjetaService.guardarTarjeta(tarjeta).subscribe(data => {
      console.log("guardado!!!!");

    })

  }

}
<form [formGroup]="form" (ngSubmit)="guardarTarjeta()">
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text bg-white">
          <i class="fas fa-user-circle" [class.green-icon]="this.form.get('titular').valid" [class.red-icon]="this.form.get('titular').invalid && this.form.get('titular').touched"></i>
        </div>
      </div>
      <input type="text" class="form-control" placeholder="Titular" formControlName="titular">
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text bg-white">
          <i class="fas fa-credit-card" [class.green-icon]="this.form.get('numeroTarjeta').valid" [class.red-icon]="this.form.get('numeroTarjeta').invalid && this.form.get('numeroTarjeta').touched"></i>
        </div>
      </div>
      <input type="text" class="form-control" placeholder="Numero de Tarjeta" formControlName="numeroTarjeta" maxlength="16" minlength="16">
    </div>
  </div>
  <div class="row">
    <div class="form-group col-md-7">

      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text bg-white">
              <i class="fas fa-calendar-alt" [class.green-icon]="this.form.get('fechaExpiracion').valid" [class.red-icon]="this.form.get('fechaExpiracion').invalid && this.form.get('fechaExpiracion').touched"></i>
            </div>
          </div>
          <input type="text" class="form-control" placeholder="MM/AAA" formControlName="fechaExpiracion" maxlength="5" minlength="5">
        </div>
      </div>

    </div>
    <div class="form-group col-md-5">
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text bg-white">
              <i class="fas fa-key" [class.green-icon]="this.form.get('cvv').valid" [class.red-icon]="this.form.get('cvv').invalid && this.form.get('cvv').touched"></i>
            </div>
          </div>
          <input type="text" class="form-control" placeholder="CVV" formControlName="cvv" maxlength="3" minlength="3">
        </div>
      </div>
    </div>
  </div>
  <div class="form group">
    <button id="boton1" class="btn btn-success btn-lg btn-block" type="submit" [disabled]="form.invalid"> <i class="fas fa-database"></i> Aceptar</button>
  </div>
</form>

aca es el error que me sale al momento de intentar guardar la infomacion]1

este es el bendito error

1 respuesta 1

0

Cuando creas el FormGroup estas asignando un control a una propiedad con nombre fechaExpiracion:

this.form = this.formBuilder.group({
  ...
  fechaExpiracion: ["", [Validators.required, Validators.maxLength(5), Validators.minLength(5)]],
  ...
});

Este nombre no coincide con el string que estás indicando en el this.form.get de guardarTarjeta, en el que pones fechaExpedicion:

const tarjeta: TarjetaCredito = {
  ...
  fechaExpedicion: this.form.get('fechaExpedicion').value,
  ...
}

un saludo

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.