Reactiveform 在 Angular 中要求的验证不正确

如何解决Reactiveform 在 Angular 中要求的验证不正确

我正在用 Firebase 制作一个注册表单，现在我正在做数据验证，在我提交表单的那一刻，方法 send(signupForm:FormGroup) 被执行，我用它来检查出现了什么错误。

>

当我没有将 {required:true} 放入任何 FormControl 时，控制台返回 Validators.required。

我想知道为什么会这样？

谢谢

sign-up.component.html

<div class="container">
  <div class="row">
    <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
      <div class="card card-signin my-5">
        <div class="card-body">
          <img
            src="../../../assets/logo.svg"
            alt=""
            class="rounded mx-auto d-block mb-4"
          />
          <h5 class="card-title text-center">Registrarse</h5>
          <form [formGroup]="signupForm" (ngSubmit)="send(signupForm)">
            <div class="form-label-group">
              <label for="First Name" class="form-label">Nombre:*</label>
              <input
                type="text"
                id="First Name"
                class="form-control"
                formControlName="Nombre"
                [ngClass]="{
                  'is-invalid':
                    signupForm.controls.Nombre.errors &&
                      signupForm.controls.Nombre.touched,'is-valid':signupForm.controls.Nombre.touched  && !signupForm.controls.Nombre.errors
                }"
                required
                autofocus
              />
              <div class="invalid-feedback" *ngIf="signupForm.hasError('pattern','Nombre')">Mínimo 4 caracteres</div>
            </div>
            <div class="form-label-group">
              <label for="inputEmail">Correo Electrónico:*</label>
              <input
                type="email"
                id="inputEmail"
                class="form-control"
                formControlName="Correo"
                [ngClass]="{
                  'is-invalid':
                    signupForm.controls.Correo.errors &&
                      signupForm.controls.Correo.touched,'is-valid':signupForm.controls.Correo.touched  && !signupForm.controls.Correo.errors
                }"
                required
              />
              <div class="invalid-feedback" *ngIf="signupForm.hasError('email','Correo')">¡Correo no válido!</div>
            <div class="invalid-feedback" *ngIf="signupForm.hasError('required','Correo')">Obligatorio</div>
            </div>
            
            <div class="form-label-group">
              <label for="inputPassword">Contraseña:*</label>
              <input
                type="password"
                id="inputPassword"
                class="form-control"
                formControlName="Password"
                required
                [ngClass]="{
                  'is-invalid':
                    signupForm.hasError('pattern','Password') ||
                    (signupForm.hasError('required','Password') &&
                      signupForm.controls.Password.touched),'is-valid':signupForm.controls.Password.touched  && !signupForm.controls.Password.errors
                }"
              />
              <div class="invalid-feedback" *ngIf="signupForm.hasError('pattern','Password')">Contraseña debe tener minimo 8 caracteres,una máyuscula,una minúscula y un número</div>
            <div class="invalid-feedback" *ngIf="signupForm.hasError('required','Password')">Obligatorio</div>
            </div>
            <div class="form-label-group">
              <label for="confirmPassword">Confirmar Contraseña:*</label>
              <input
                type="password"
                id="confirmPassword"
                class="form-control"
                formControlName="ConfirmPassword"
                [ngClass]="{
                  'is-invalid':signupForm.hasError('required','ConfirmPassword')
                }"
                required
              />
              <div *ngIf="signupForm.hasError('required','ConfirmPassword')">Obligatorio</div>
            </div>
            <button
              class="btn btn-lg btn-primary btn-block text-uppercase mt-4"
              type="submit"
            >
              Registrarse
            </button>
            <p class="mt-4">
              ¿Ya tiene cuenta? <a routerLink="/signin">Iniciar Sesión</a>
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

注册组件.ts

import { Component,OnInit } from '@angular/core';
import {
  FormBuilder,FormGroup,Validators,AbstractControl,ValidatorFn,ValidationErrors,} from '@angular/forms';
import { AuthService } from 'src/app/services/auth.service';


@Component({
  selector: 'app-sign-up',templateUrl: './sign-up.component.html',styleUrls: ['./sign-up.component.scss'],})
export class SignUpComponent implements OnInit {
  signupForm: FormGroup;

  constructor(
    private builder: FormBuilder,private authentication: AuthService
  ) {
    this.signupForm = builder.group({
        Nombre:['',Validators.pattern(/^.{4,}$/)],Correo:['',Validators.email],Password:['',Validators.pattern(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,ConfirmPassword:['']
    });
  }
  
  ngOnInit(): void {}
  send(signupForm:FormGroup){
    
    console.log(signupForm.get('Nombre')?.errors);
  }
}

解决方法

我的输入元素中有所需的标签 删除它们解决了问题