Documentation Index
Fetch the complete documentation index at: https://mintlify.com/AngheloMP10/biblioteca-virtual-frontend/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The RegistroComponent allows new users to create an account in the system. After successful registration, users are automatically redirected to the login page.
@Component({
selector: 'app-registro',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterLink],
templateUrl: './registro.html',
styleUrls: ['./registro.css'],
})
app-registro
Imports:
CommonModule - Angular common directivesReactiveFormsModule - Reactive forms supportRouterLink - Router navigation
Template: ./registro.html
Properties
Reactive form group containing username and password fields with validators:
username: Required, minimum 4 characterspassword: Required, minimum 4 characters
mensajeError
mensajeError: string = ''
isSuccess
isSuccess: boolean = false
true, displays success message and hides the form.
Constructor Dependencies
constructor(
private fb: FormBuilder,
private authService: AuthService,
private router: Router
)
- FormBuilder - Creates reactive form controls
- AuthService - Handles registration API calls
- Router - Navigates to login after successful registration
Methods
onSubmit
Handles form submission and user registration:
- Validates the form is complete and meets requirements
- Extracts username and password from the form
- Calls
AuthService.register() with the registration data
- On success:
- Sets
isSuccess to true
- Clears any error messages
- Waits 3 seconds, then redirects to
/auth/login
- On error: Displays message “Error al registrar. Es posible que el usuario ya exista.”
Example usage in template:
<form [formGroup]="registroForm" (ngSubmit)="onSubmit()" *ngIf="!isSuccess">
<div class="mb-3">
<label for="username" class="form-label">Nombre de Usuario</label>
<input
type="text"
id="username"
class="form-control"
formControlName="username"
placeholder="Elige un usuario"
/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Contraseña</label>
<input
type="password"
id="password"
class="form-control"
formControlName="password"
placeholder="Crea una contraseña"
/>
</div>
<button type="submit" class="btn btn-success" [disabled]="registroForm.invalid">
Registrarse
</button>
</form>
Full Source Code
import { Component } from '@angular/core';
import {
FormBuilder,
FormGroup,
Validators,
ReactiveFormsModule,
} from '@angular/forms';
import { Router, RouterLink } from '@angular/router';
import { CommonModule } from '@angular/common';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-registro',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterLink],
templateUrl: './registro.html',
styleUrls: ['./registro.css'],
})
export class RegistroComponent {
registroForm: FormGroup;
mensajeError: string = '';
isSuccess: boolean = false;
constructor(
private fb: FormBuilder,
private authService: AuthService,
private router: Router
) {
this.registroForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(4)]],
password: ['', [Validators.required, Validators.minLength(4)]],
});
}
onSubmit() {
if (this.registroForm.invalid) {
this.mensajeError = 'Por favor completa el formulario correctamente.';
return;
}
const { username, password } = this.registroForm.value;
const registroData = { username, password };
this.authService.register(registroData).subscribe({
next: (resp) => {
this.isSuccess = true;
this.mensajeError = '';
setTimeout(() => {
this.router.navigate(['/auth/login']);
}, 3000);
},
error: (err) => {
console.error('Error registro:', err);
this.mensajeError =
'Error al registrar. Es posible que el usuario ya exista.';
this.isSuccess = false;
},
});
}
}