0

Estoy tratando de usar two way binding, pero tengo un error 'Cannot read property 'CardOwnerName' of undefined', trate de solucionarlo usando el operador '?' con el fin de evaluar si la propiedad esta en null o vacia, pero sigo con el mismo error. Les comparto el las clases y el HTML.

Gracias de antemano!

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { PaymentDetailService } from '../shared/payment-detail.service';
import { PaymentDetail } from '../shared/payment-detail.model';

@Component({
  selector: 'app-payment-details',
  templateUrl: './payment-details.component.html',
  styleUrls: ['./payment-details.component.scss']
})
export class PaymentDetailsComponent implements OnInit {


  formDatosTarjeta: FormGroup;
  dataPayment: PaymentDetail;

  constructor(
    private formBuilder: FormBuilder,
    public paymentService: PaymentDetailService
  ) { }

  ngOnInit() {
    this.createForm();
 
  }
  }
  

 <div class="form-group">
            <label>Card owner name</label>
            <input type="text" class="form-control" name="CardOwnerName" formControlName="CardOwnerName" [(ngModel)]="paymentService.formData.CardOwnerName">
            <small *ngIf="formDatosTarjeta.hasError('required', 'CardOwnerName')"
                class="form-text text-muted">Required</small>
        </div>

export class PaymentDetail {
    PMid: number;
    CardOwnerName: string;
    CardNumber: string;
    ExpirationDate: string;
    CVV: string;
}

1 respuesta 1

1

En esta parte asociaste payment-details.component.html con PaymentDetailsComponent:

@Component({
  selector: 'app-payment-details',
  templateUrl: './payment-details.component.html',
  styleUrls: ['./payment-details.component.scss']
})
export class PaymentDetailsComponent implements OnInit {

Sin embargo quieres usar CardOwnerName en payment-details.component.html como haces aqui:

<input type="text" class="form-control" name="CardOwnerName" formControlName="CardOwnerName" [(ngModel)]="paymentService.formData.CardOwnerName">
            <small *ngIf="formDatosTarjeta.hasError('required', 'CardOwnerName')"

Pero CardOwnerName no existe en PaymentDetailsComponent, entonces nunca va a lograr acceder ahi ya que eso esta en otra clase (PaymentDetail).

Para que funcione debes declarar CardOwnerName en PaymentDetailsComponent ya que esta parte del template:[(ngModel)] intenta usar comunicación bidirecional entre el template payment-details.component.html y la clase controlador PaymentDetailsComponent.

Creo que debe ser algo así: <input type="text" class="form-control" name="CardOwnerName" formControlName="CardOwnerName" [(ngModel)]="cardOwnerName"> y en PaymentDetailsComponent poner cardOwnerName: string;

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.