Angular desde cero (2024) | 3.4 - FormBuilder

sistemas sistemas@sistemassistemas908

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();
 }
 }
}

Escribe una respuesta