反应式表单在 Angular 中需要的验证不正确

Question

我正在使用 Firebase 制作注册表单，目前我正在进行数据验证，在我提交表单时，方法 send(signupForm:FormGroup) 被执行，我使用它来检查出现的错误。

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

我想知道为什么会这样？

谢谢

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

Answer 1

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