在angular中填充字段之前，默认情况下不进行验证

Question

我有验证在register.html页面和处理在register.ts中的FormGroup。如何在不在加载页面上填写每个字段后调用验证？

这是我的代码。

register.ts文件：

import { Component, OnInit } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth/auth.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { CustomValidators } from 'src/app/custom-validators';
     
    @Component({
      selector: 'app-register',
      templateUrl: './register.component.html',
      styleUrls: ['./register.component.css']
    })
    export class RegisterComponent implements OnInit {
      minLength = { name: 1, email: 10, password: 6 };
      id;
      signupForm;

      constructor(private _AuthService: AuthService, private _RouterActiva: ActivatedRoute, private _Router: Router) {
        this.id = this._RouterActiva.snapshot.paramMap.get('id');
      }

      ngOnInit(): void {
        const { required, email, minLength } = Validators;
        const { patternValidator, passwordMatchValidator } = CustomValidators;
        const decimal = patternValidator(/\d/, { hasNumber: true }); // To check whether the entered password has a number
        const upperCase = patternValidator(/[A-Z]/, { hasCapitalCase: true }); // To check whether the entered password has upper case letter
        const lowerCase = patternValidator(/[a-a]/, { hasCapitalCase: true }); // To check whether the entered password has a lower case letter
        const specialCharacter = patternValidator(/[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/, { hasSpecialCharacters: true }); // To check whether the entered password has a special character
        this.signupForm = new FormGroup({
          name: new FormControl(null, [required, minLength(this.minLength.name)]),
          email: new FormControl(null, [required, email, minLength(this.minLength.email)]),
          password: new FormControl(null, [required, minLength(this.minLength.password), decimal, upperCase, lowerCase, specialCharacter]),
          confirmPassword: new FormControl(null, [required]),
        },
          {
            // check whether our password and confirm password match
            validators: passwordMatchValidator
          })
      }

      signup() {
        const body = { ...this.signupForm.value, RoleId: this.id }
        this._AuthService.signup(body).subscribe(() => {
          alert("Your account has been successfully created, You can login now")
          this._Router.navigate(['/login'])
        })
      }

      get name() {
        return this.signupForm.get('name');
      }

      get email() {
        return this.signupForm.get('email');
      }

      get password() {
        return this.signupForm.get('password');
      }

      get confirmPassword() {
        return this.signupForm.get('confirmPassword');
      }

    }

html：

<!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->

<div class="wrapper fadeInDown">
        <div id="formContent">
            <!-- Tabs Titles -->

            <!-- Icon -->
            <div class="fadeIn first">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMArry-DDCCYujaUQugB_fA1jXr35M_5ELEQ&usqp=CAU"
                    id="icon" alt="User Icon" />
            </div>

            <!-- Login Form -->
            <form (ngSubmit)="signup()" [formGroup]="signupForm"  >
                <input formControlName="name" required type="text" id="name" class="fadeIn second" placeholder="Name">
                <div *ngIf="name.touched && name.invalid" class="alert alert-danger error">
                    <div *ngIf="name.errors.required">* please enter your name</div>
                    <div *ngIf="name.errors.minlength"> * name must be at least {{minLength.name}} characters long</div>
                </div>

                <input formControlName="email" required type="text" id="email" class="fadeIn second" placeholder="Email">
                <div *ngIf="email.touched && email.invalid" class="alert alert-danger error">
                    <div *ngIf="email.errors.required">* Email is Required!</div>
                    <div *ngIf="email.errors.email">* Enter a valid email address!</div>
                    <div *ngIf="email.errors.minlength"> * Must be at least {{minLength.email}} characters</div>
                </div>

                <input formControlName="password" required type="password" id="password" class="fadeIn third"  placeholder="password">
                <div *ngIf="password.touched && password.invalid" class="alert alert-danger error">
                    <div *ngIf="password.errors.required">* Password is Required!</div>
                    <div *ngIf="password.errors.minlength"> * Must be at least {{minLength.password}} characters</div>
                    <div *ngIf="password.errors.hasNumber"> * Must be at least one number</div>
                    <div *ngIf="password.errors.hasCapitalCase"> * Must be at least one letter in capital case!</div>
                    <div *ngIf="password.errors.hasSmallCase"> * Must be at least one letter in small case!</div>
                    <div *ngIf="password.errors.hasSpecialCharacters">* password must have at least one special characters</div>
                </div>

                <input formControlName="confirmPassword" required type="password" id="confirmPassword" class="fadeIn third"  placeholder="Confirm Password">
                <div *ngIf="confirmPassword.errors" class="alert alert-danger error">  Password do not match  </div>

                <input [disabled]='signupForm.invalid' type="submit" class="fadeIn fourth" value="Sign up">
            </form>

             <div id="formFooter">
                <p>Have an account?</p>
                <a class="underlineHover" routerLink="/login"> Log in now!</a>
            </div> 

        </div>
</div>

Answer 1

使用

signupForm.get('name').dirty

而不是

signupForm.get('name').touched