sistemas sistemas

<div class="container">
 <div class="left-column">
 <mat-card class="card">
 <mat-card-header class="card__title">
 <mat-card-title>Transferencia Bancariamat-card-title>
 mat-card-header>

 <mat-card-content>
 <form class="form" [formGroup]="formGroup" (ngSubmit)="submitTransfer()">
 <div formGroupName="beneficiaryInfo">
 <mat-form-field appearance="outline">
 <mat-label>Nombre del beneficiariomat-label>
 <input matInput formControlName="beneficiaryName">
 mat-form-field>

 <mat-form-field appearance="outline">
 <mat-label>Número de cuenta del beneficiariomat-label>
 <input matInput formControlName="accountNumber">
 mat-form-field>
 div>

 <mat-form-field appearance="outline">
 <mat-label>Monto a transferirmat-label>
 <input matInput type="number" formControlName="amount">
 mat-form-field>

 <button mat-raised-button color="primary" type="submit" [disabled]="formGroup.invalid">
 Realizar Transferencia
 button>
 form>
 mat-card-content>
 mat-card>
 div>

 <div class="right-column">
 <h2 class="json-title">Datos del Formulario (Live)h2>
 <div>
 <strong>Nombre del Beneficiario:strong>
 {{ formGroup.get('beneficiaryInfo.beneficiaryName')?.value }}
 div>
 <code class="json-data">{{ formGroup.value | json }}code>
 div>
div>

import {Component, inject} from '@angular/core';
import { FormGroup, NonNullableFormBuilder, Validators } from '@angular/forms';

@Component({
 selector: 'app-transfert-account',
 standalone: false,
 templateUrl: './transfert-account.html',
 styleUrl: './transfert-account.css'
})
export class TransfertAccount {
 // Usamos NonNullableFormBuilder para mejor tipado y evitamos la necesidad de "NonNullableFormBuilder" en el import si solo usamos FormBuilder
 private readonly formBuilder = inject(NonNullableFormBuilder);

 // Definición del FormGroup principal
 formGroup = this.formBuilder.group({
 beneficiaryInfo: this.formBuilder.group({
 beneficiaryName: ['', Validators.required], // Añadido un validador simple
 accountNumber: ['', [Validators.required, Validators.pattern(/^[0-9]{10,20}$/)]] // Ejemplo de validador
 }),
 amount: [0, [Validators.required, Validators.min(1)]]
 });

 submitTransfer() {
 if (this.formGroup.valid) {
 console.log("¡Transferencia enviada!");
 console.log("Datos:", this.formGroup.value);
 // Aquí se llamaría al servicio para realizar la transferencia
 } else {
 console.error("El formulario no es válido.");
 // Marcar todos los campos como "touched" para mostrar errores
 this.formGroup.markAllAsTouched();
 }
 }
}

<p>form-reactive works!p>


<form [formGroup]="form" (ngSubmit)="onSubmit()">
 <label for="name">Nombrelabel>
 <input type="text" formControlName="fullname" id="name">

 <label for="username">Usuariolabel>
 <input type="text" formControlName="username" id="username" >

 <label for="email">Correo Electrónicolabel>
 <input type="email" formControlName="email" id="email">

 <button type="submit">Enviarbutton>

form>