Почему форма всегда недействительна после ее отправки?

В вашем файле Signup-Component.html правильно привяжите элементы управления name, email, password, confirmPassword к signupForm. Кроме того, когда дело доходит до сообщений об ошибках, они отображаются только тогда, когда форма отправлена, а поля формы имеют недопустимое состояние. Обратитесь к следующему коду ниже и соответствующим образом реорганизуйте свой код.

знак-компонент.html:

<form [formGroup] = "signupForm" (ngSubmit) = "onSubmit()" class = "form-detail">
    <h2>Registration Form</h2>
    <div class = "form-row-total">
        <div class = "form-row">
            <input type = "text" formControlName = "name" class = "input-text" placeholder = "Your Name" required>
            <div *ngIf = "signupForm.controls.name.touched && signupForm.controls.name.errors?.required" class = "alert alert-danger" role = "alert">
                Enter a name
            </div>
        </div>
        <div class = "form-row">
            <input type = "text" formControlName = "email" class = "input-text" placeholder = "Your Email" required pattern = "[^@]+@[^@]+.[a-zA-Z]{2,6}">
            <div *ngIf = "signupForm.controls.email.touched && signupForm.controls.email.errors?.required" class = "alert alert-danger" role = "alert">
                Enter an email
            </div>
            <div *ngIf = "signupForm.controls.email.touched && signupForm.controls.email.errors?.pattern" class = "alert alert-danger" role = "alert">
                Invalid email format
            </div>
            <div *ngIf = "userExists" class = "alert alert-danger" role = "alert">
                User already exists
            </div>
        </div>
    </div>
    <div class = "form-row-total">
        <div class = "form-row">
            <input type = "password" formControlName = "password" class = "input-text" placeholder = "Your Password" required>
            <div *ngIf = "signupForm.controls.password.touched && signupForm.controls.password.errors?.required" class = "alert alert-danger" role = "alert">
                Enter a password
            </div>
        </div>
        <div class = "form-row">
            <input type = "password" formControlName = "confirmPassword" class = "input-text" placeholder = "Confirm Password" required>
            <div *ngIf = "signupForm.controls.confirmPassword.touched && signupForm.hasError('passwordMismatch')" class = "alert alert-danger" role = "alert">
                Passwords do not match
            </div>
        </div>
    </div>
    <div class = "form-row-last">
        <input type = "submit" class = "register" value = "Sign Up">
    </div>
</form>

регистрация.comComponent.ts:

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

@Component({
    selector: 'app-signup',
    templateUrl: './signup.component.html',
    styleUrls: ['./signup.component.css']
})


export class SignupComponent implements OnInit {
    signupForm: FormGroup;
    userExists = false;

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit(): void {
        this.signupForm = this.formBuilder.group({
            name: ['', Validators.required],
            email: ['', [Validators.required, Validators.pattern('[^@]+@[^@]+\\.[a-zA-Z]{2,6}')]],
            password: ['', Validators.required],
            confirmPassword: ['', Validators.required]
        }, { validator: this.passwordMatchValidator });
    }

    async onSubmit(): Promise<void> {
        if (this.signupForm.valid) {
            const name = this.signupForm.get('name').value;
            const email = this.signupForm.get('email').value;
            const password = this.signupForm.get('password').value;

            const userExists = await this.checkIfUserExists(email);

            if (userExists) {
                this.userExists = true;
            } else {
                this.userExists = false;
                await this.addNewUser(name, email, password);
                await this.registerUser(name, email, password);
                this.signupForm.reset();            
            }
        } else {
           
            this.signupForm.markAllAsTouched();
        }
    }

    async checkIfUserExists(email: string): Promise<boolean> {
        return false;
    }

    async addNewUser(name: string, email: string, password: string): Promise<void> {
    }

    async registerUser(name: string, email: string, password: string): Promise<void> {

    }

    passwordMatchValidator(formGroup: FormGroup) {
        const password = formGroup.get('password').value;
        const confirmPassword = formGroup.get('confirmPassword').value;
        if (password !== confirmPassword) {
            formGroup.get('confirmPassword').setErrors({ passwordMismatch: true });
        } else {
            formGroup.get('confirmPassword').setErrors(null);
        }
    }
}