Angular formBuilder 组弃用自定义验证

Question

I am getting this error when I place my custom validation, and try naming the validation as "as AbstractControlOption" and modifying the code in different ways but nothing works

This API is not typesafe and can result in issues with Closure Compiler renaming. Use the FormBuilder#group overload with AbstractControlOptions instead. Note that AbstractControlOptions expects validators and asyncValidators to be valid validators. If you have custom validators, make sure their validation function parameter is AbstractControl and not a sub-class, such as FormGroup. These functions will be called with an object of type AbstractControl and that cannot be automatically downcast to a subclass, so TypeScript sees this as an error. For example, change the (group: FormGroup) => ValidationErrors|null signature to be (group: AbstractControl) => ValidationErrors|null.

this is my custom validation

import { Injectable } from '@angular/core';
import { AbstractControl, FormControl, ValidationErrors } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class ValidatorService {

  public nombreApellidoPattern:string = '([a-zA-Z]+) (.+[a-zA-Z])';
  public emailPattern: string = "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$";

  constructor() { }

  noPuedesSerYo (control:FormControl):ValidationErrors | null{
    const valor:string =control.value?.trim().toLowerCase();
    if(valor==='pepepepon'){
      return {noYo:true};
    }
    return null;
  }

  camposIguales(campo1:string, campo2:string){
    return (control:AbstractControl)=>{
      const pass1=control.get(campo1)?.value;
      const pass2=control.get(campo2)?.value;

      console.log(campo1)

      if(pass1!==pass2){  
        control.get(campo2)?.setErrors({noIguales:true});
        return {noIguales:true};
      }

      control.get(campo2)?.setErrors(null);
      return null;
    }
  }

}

and here i use this validation but i dont know why this code is not working:(

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ValidatorService } from 'src/app/shared/validator/validator.service';
//import { emailPattern, nombreApellidoPattern, noPuedesSerYo } from '../../../shared/validator/validaciones';

@Component({
  selector: 'app-registro',
  templateUrl: './registro.component.html',
  styleUrls: ['./registro.component.css']
})
export class RegistroComponent implements OnInit {

  miFormulario:FormGroup = this.fb.group({
    nombre:['',[Validators.required, Validators.pattern(this.validatorService.nombreApellidoPattern)]],
    email:['',[Validators.required, Validators.pattern(this.validatorService.emailPattern)]],
    username:['',[Validators.required, this.validatorService.noPuedesSerYo]],
    password:['',[Validators.required,Validators.minLength(6)]],
    password2:['',[Validators.required]]
  },{
    Validators:this.validatorService.camposIguales('password','password2')
  });

  constructor(private fb:FormBuilder, private validatorService:ValidatorService){}

  ngOnInit(): void {
    this.miFormulario.reset({
      nombre:'',
      email:'',
      username:'',
      password:'',
      password2:''
    })
  }

  campoInvalido(campo:string){
    return this.miFormulario.get(campo)?.invalid && this.miFormulario.get(campo)?.touched;
  }

  submitForm(){
    this.miFormulario.markAllAsTouched();
  }

}

Answer 1

Fix your code accordingly, I hope so you problem solved: https://stackblitz.com/edit/angular-ivy-2qfmub?file=src/app/registro-component/registro.component.ts

miFormulario: FormGroup = this.fb.group(
        {
          nombre: [
            '',
            [
              Validators.required,
              Validators.pattern(this.validatorService.nombreApellidoPattern),
            ],
          ],
          email: [
            '',
            [
              Validators.required,
              Validators.pattern(this.validatorService.emailPattern),
            ],
          ],
          username: [
            '',
            [Validators.required, this.validatorService.noPuedesSerYo],
          ],
          password: ['', [Validators.required, Validators.minLength(6)]],
          password2: ['', [Validators.required]],
        },
        {
          validators: [
            this.validatorService.camposIguales('password', 'password2'),
          ],
        }
      );