Estoy tratando de enviar información cuando hago click en el boton editar, necesito cargar los datos al los respectivos input, estoy usando @Output para enviar los datos al app.component y un @Input para enviarla al FormComponent.. cuando tengo la información en el componente no sé en que momento ni como setear los valores de los input estoy usando ngForms drive Templates.. Alguien podria ayudarme.
Este es mi app.component:
import { Component, OnInit } from '@angular/core';
import { Card } from './interfaces/Card.inteface';
import { ToastrService } from 'ngx-toastr';
import { TarjetaService } from './services/tarjeta.service';
import { tap } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
listCards: Card[] = [];
dataUpdate:Card = {
id: 0,
titular:'',
numeroTarjeta:'',
fechaExpriracion:'',
cvvPassword:''
};
constructor(private toastr: ToastrService, private getTarjetaSvc: TarjetaService){}
ngOnInit(): void {
this.getTarjetas();
}
getTarjetas(): void {
this.getTarjetaSvc.getListTarjetas().pipe(
tap(cards => this.listCards = cards),
tap(cards => console.log(cards)))
.subscribe()
}
addCard(card: Card): void {
this.getTarjetaSvc.saveTarjeta(card).pipe(
tap(res => {
this.toastr.success('La tarjeta se ha añadido exitosamente', 'Operacion Exitosa!')
this.getTarjetas();
})
).subscribe()
}
deleteCard(index: number): void{
this.getTarjetaSvc.deleteTarjeta(index).pipe(
tap(res =>{
this.toastr.error('La tarjeta se ha eliminada exitosamente', 'Operacion Exitosa!')
this.getTarjetas()
})
).subscribe();
}
updateCard(updateData:Card){
this.dataUpdate = updateData
}
}
Este es el .ts del component, aqui guardo y envio los datos, en este punto ya tengo los datos de la card que deseo editar:
<div class=" flex justify-between font-bold text-white text-2xl bg-green-700 p-4 shadow-sm shadow-green-400">
<h1>Tajertas de Credito App</h1>
<i class="fa fa-home"></i>
</div>
<div class="container mx-auto">
<div class="flex flex-wrap justify-evenly space-x-3">
<app-tatjeta-credito-form
(Card)="addCard($event)"
[dataUpdate] ="dataUpdate"
></app-tatjeta-credito-form>
<app-tarjeta-credito-view
[listCards]="listCards"
(indexCardForDelete)="deleteCard($event)"
(updateData)="updateCard($event)"
></app-tarjeta-credito-view>
{{dataUpdate | json}}
</div>
</div>
Este es el componente del form donde deseo rellenar los input y estoy resiviendo los datos con un @Input:
import { ValueConverter } from '@angular/compiler/src/render3/view/template';
import { Component, EventEmitter, Output, Input, OnChanges, SimpleChanges, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Card } from 'src/app/interfaces/Card.inteface';
@Component({
selector: 'app-tatjeta-credito-form',
templateUrl: './tatjeta-credito-form.component.html',
styleUrls: ['./tatjeta-credito-form.component.css']
})
export class TatjetaCreditoFormComponent{
model = {
id:0,
titular:'',
numeroTarjeta:'',
fechaExpriracion:'',
cvvPassword:''
}
@Input() dataUpdate!:Card
@Output() Card = new EventEmitter<Card>()
onSubmit(form:NgForm){
console.log(form.value.card);
this.Card.emit(form.value.card)
form.setValue({titular:this.dataUpdate.titular})
}
}
<div class="text-center mt-8 p-4 rounded-md shadow-sm shadow-gray-500">
<h1 class="text-2xl text-gray-800 font-semibold my-4">Add Credit Card</h1>
<form type="submit" (ngSubmit)="onSubmit(formCard)" #formCard="ngForm">
<div class="flex items-center p-2 text-md">
<i class="fas fa-user" [ngClass]="{
'text-green-700':titular.valid,
'text-red-600':!titular.valid && titular.touched
}"></i>
<input type="text" name="titular" ngModel={{model.titular}} #titular="ngModel" required minlength="5"
class="outline-none w-full rounded-sm ml-4 p-1 text-black ring-2 border-l-8" placeholder="Nombre"
[ngClass]="{
'border-green-700':titular.valid,
'border-red-600':!titular.valid && titular.touched
}">
</div>
<div class="flex p-2 items-center text-md">
<i class="fas fa-credit-card" [ngClass]="{
'text-green-700':numeroTarjeta.valid,
'text-red-600':!numeroTarjeta.valid && numeroTarjeta.touched
}"></i>
<input type="text" ngModel={{model.numeroTarjeta}} name="numeroTarjeta" #numeroTarjeta="ngModel" required minlength="5" maxlength="5"
class="outline-none w-full rounded-sm ml-4 p-1 text-black ring-2 border-l-8"
placeholder="Numero Tarjeta" [ngClass]="{
'border-green-700':numeroTarjeta.valid,
'border-red-600':!numeroTarjeta.valid && numeroTarjeta.touched
}">
</div>
<div class="flex p-2 items-center text-md ">
<i class="fas fa-calendar-alt" [ngClass]="{
'text-green-700':fechaExpriracion.valid,
'text-red-600':!fechaExpriracion.valid && fechaExpriracion.touched
}"></i>
<input type="text" ngModel={{model.fechaExpriracion}} name="fechaExpriracion" #fechaExpriracion="ngModel" required maxlength="10" minlength="10"
class="outline-none w-full rounded-sm ml-4 p-1 text-black ring-2 border-l-8"
placeholder="Fecha Expedicion" [ngClass]="{
'border-green-700':fechaExpriracion.valid,
'border-red-600':!fechaExpriracion.valid && fechaExpriracion.touched
}">
</div>
<div class="flex p-2 items-center text-md ">
<i class="fas fa-key" [ngClass]="{
'text-green-700':cvvPassword.valid,
'text-red-600':!cvvPassword.valid && cvvPassword.touched
}"></i>
<input type="password" ngModel={{model.cvvPassword}} name="cvvPassword" #cvvPassword="ngModel" required maxlength="3" minlength="3"
class="outline-none w-full rounded-sm ml-4 p-1 text-black ring-2 border-l-8" placeholder="Numero Cvv"
[ngClass]="{
'border-green-700':cvvPassword.valid,
'border-red-600':!cvvPassword.valid && cvvPassword.touched
}">
</div>
<button type="submit" [disabled]="!formCard.form.valid"
class="btn-active"
[ngClass]="{'btn-disable':!formCard.form.valid}"
>Agregar</button>
</form>
</div>