提交后反应形式红色

Question

我的表单组运行良好，除了当我完成提交表单输入时变成红色，因为它会出现验证错误。

您会看到我已尝试添加 this.form.reset() 和 this.form.markAsPristine()，但在我提交后仍然收到红色输入。

这是我的代码：

form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators, MinLengthValidator } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { PasswordService } from '../../shared/password.service';
import { Password } from '../../shared/password.model';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  form!:FormGroup;  
  passwords!:Password[];

  constructor(private passwordService: PasswordService, 
              private fb: FormBuilder, 
              private _snackBar: MatSnackBar) { }

  ngOnInit():void {
    this.initializeForm();
    this.passwords = this.passwordService.getAllPasswords();
  }

  initializeForm():void {
    this.form = this.fb.group({
      website: new FormControl(null, [Validators.required]),
      email: new FormControl(null, [Validators.required, Validators.email]),
      password: new FormControl(null, [Validators.required, Validators.minLength(8)])
    })
  }

  openSnackBar() {
    this._snackBar.openFromComponent(PizzaPartyComponent, {
      duration: 3000,
    });
  }

  passwordExists(password:string):boolean { // Check if password has been used
    return this.passwords.filter(x => x.password === password).length > 1 ? true : false;
  }

  onSubmit():void {   
    if (this.form.invalid) return

    let passwordObj = this.form.value;
    passwordObj = {...passwordObj, visible: false}; // Spread visibility
    this.passwordService.addPassword(passwordObj);

    if (this.passwordExists(passwordObj.password)) {
      this.openSnackBar()
    }
  
    this.form.reset();
    this.form.markAsPristine();
    
  }
}

@Component({
  selector: 'snack-bar-component',
  templateUrl: 'snack-bar-component.html',
  styles: [`
    .notification {
      color: #f2f3f4;
    }
  `],
})
export class PizzaPartyComponent {}

form.component.html

<div class="entry-form">
  <form [formGroup]="form" (ngSubmit)='onSubmit()' class='mat-elevation-z8'>
    <h2 class="title is-5">New Password</h2>

    <mat-form-field>
      <input matInput placeholder='Website' formControlName='website'>
    </mat-form-field>
    <small *ngIf='form.get("website")!.hasError("required") && form.get("website")!.touched' class='danger-text'>This field is required</small>
    
    <mat-form-field>
      <input matInput placeholder='Email' formControlName='email'>
    </mat-form-field>
    <small *ngIf='form.get("email")!.hasError("required") && form.get("email")!.touched' class='danger-text'>This field is required</small>
    <small *ngIf='form.get("email")!.hasError("email") && form.get("email")!.touched' class='danger-text'>This field must be a valid email</small>

    <mat-form-field>
      <input matInput placeholder='Password' type='password' formControlName='password'>
    </mat-form-field>
    <small *ngIf='form.get("password")!.hasError("required") && form.get("password")!.touched' class='danger-text'>This field is required</small>
    <small *ngIf='form.get("password")!.hasError("minLength") && form.get("password")!.touched' class='danger-text'>Password must be atleast 8 characters</small>

    <button [disabled]='form.invalid' mat-raised-button color='primary'>
      <mat-icon>add</mat-icon>
      Add
    </button>
  </form>
</div>