3

validar si el campo de "repetir contraseña" es igual a contraseña y viceversa, el punto es que no quiero usar Form Builder

Lo que llevo es la validación básica de campos requeridos con el Validatori required, estas son las clases que importe

import { Validators, FormControl, FormGroup } from '@angular/forms';

Lo primero que hice fue crear ambos form controllers con sus validaciones

contrasena = new FormControl('', [Validators.required, Validators.minLength(6)]);
repetirContrasena = new FormControl('', [Validators.required, Validators.minLength(6)]);

Despues agrupe los FormControllers en un Form group

registroForm = new FormGroup({
    contrasena: this.contrasena,
    repetirContrasena : this.repetirContrasena,
});

En el HTML así declare el form

<form method="post" [formGroup]="registroForm" (ngSubmit)="onSubmit()" >

Y asi fue como declare las contraseña

<!-- Contraseña -->
        <div class="registroFormContentInputSmall">
          <label for="contraseña">Contraseña</label>
          <input id="contraseña" type="password" name="contrasena" placeholder="contraseña" [formControl]="contrasena">
          <!-- Contraseña Alerts -->
          <div [hidden]="contrasena.valid || contrasena.untouched" class="alert">
            <div [hidden]="!contrasena.hasError('required')">
              - Se requiere la contraseña
            </div>
            <div [hidden]="!contrasena.hasError('minlength')">
              - Se requieren 6 carácteres o más
            </div>
            <div [hidden]="!contrasena.hasError('contrasenaDiferente')">
              - Las contraseñas no coinciden
            </div>
          </div>
        </div>

<!-- Repetir Contraseña -->
        <div class="registroFormContentInputSmall registroFormContentInputSmallMargin">
          <label>Confirmar contraseña</label>
          <input type="password" name="repetirContrasena" placeholder="repetir contraseña" [formControl]="repetirContrasena">
          <!-- RepetirContraseña Alerts -->
          <div [hidden]="repetirContrasena.valid || repetirContrasena.untouched" class="alert">
            <div [hidden]="!repetirContrasena.hasError('required')">
              - Se requiere la contraseña
            </div>
            <div [hidden]="!repetirContrasena.hasError('minlength')">
              - Se requieren 6 carácteres o más
            </div>

          </div>
        </div>

Eh estado intentando agregar un Validator que yo hice a travez de un función pero no puedo resolver el problema y me gustaría saber como agregar esa validación de comparar las contraseñas y ver si son iguales o no.

1 respuesta 1

2

Paso 1: Importar módulos.

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule
  ]
})
export class TuModulo {}

Paso 2: Crear función de validación para formularios.

import { ValidatorFn, AbstractControl} from '@angular/forms';

function equalsValidator(otherControl: AbstractControl): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const value: any = control.value;
    const otherValue: any = otherControl.value;
    return otherValue === value ? null : { 'notEquals': { value, otherValue } };
  };
}

export const CustomValidators = {
  equals: equalsValidator
};

Paso 3: Crear formulario y asignar validadores en el ViewModel.

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

@Component({
  selector: 'app-tu-componente',
  templateUrl: './tu.component.html',
  styleUrls: ['./tu.component.css']
})
export class TuComponent {

  formGroup: FormGroup | null = null;

  constructor(private fb: FormBuilder) {
    this.formGroup = this.fb.group({
      password: ['', [Validators.required]],
      repeat_password: ''
    });

    this.formGroup.get('repeat_password').setValidators(
      CustomValidators.equals(this.formGroup.get('password'))
    );
  }

  onSubmit(): void {
    const password = this.formGroup.get('password').value as string;
    // Tú lógica de negocio...
  }
}

Paso 4: Vincular formulario y controles en la View.

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <input type="password" placeholder="Contraseña" [formControl]="formGroup.controls['password']">
  <input type="password" placeholder="Repetir Contraseña" [formControl]="formGroup.controls['repeat_password']">
  <button type="submit" [disabled]="formGroup.invalid">Guardar cambios</button>
</form>

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.