Angular Reactive 形成奇怪的行为

Answer 1

我通过删除 ngDoCheck 来修复问题，将订阅放入 ngOnInit 中， 将 isVaild 替换为 isSubscribed，编辑passwordValidation 和 emailValidation，将 OnClick 编辑为 onSubmit

登录.组件.ts：

    import { AfterContentChecked, Component, DoCheck, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {  Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  form!: FormGroup;
  isSubmitted: boolean = false;

  constructor (private formBuilder: FormBuilder, private router: Router) {}

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });

    this.form.valueChanges.subscribe()
  }

  get emailValidation() {
    return this.form.get('email')?.invalid && (this.form.get('email')?.dirty || this.form.get('email')?.touched || this.isSubmitted);
  }

  get passwordValidation() {
    return this.form.get('password')?.invalid && (this.form.get('password')?.dirty || this.form.get('password')?.touched || this.isSubmitted);
  }


  onSubmit(): void {
    if(this.form.valid){
      this.router.navigate(['/dashboard'])
    }
    this.isSubmitted = true;
  }
}

login.component.html：

<div class="main">
    <div class="image">
        <img src="./assets/icons/login.png" alt="Login">
        <p>Login in to your account</p>
    </div>
        <form [formGroup]="form" class="login" (ngSubmit)="onSubmit()">
            <p class="error-message" style="font-size: large;" *ngIf="isSubmitted">Please fill the your info</p>
            <p>Enter your user name and password</p>
            <div class="userName">
                <label for="userName">User name</label>
                <br>
                <input [ngClass]="{'error': emailValidation}" type="text" id="userName" placeholder="Your user name" formControlName="email">
                <p class="error-message" *ngIf="emailValidation">please enter your user name</p>
            </div>
            <div class="pass">
                <label for="pass">Password</label>
                <br>
                <input [ngClass]="{'error': passwordValidation}" type="password" id="pass" placeholder="your password" formControlName="password">
                <p class="error-message" *ngIf="passwordValidation">please enter your user password</p>
            </div>
            <button class="btnConfig" id="btnlogin" type="submit"><img src="./assets/icons/login-btn.png" alt="login"> Login</button>
        </form>             
</div>