Angular 反应式表单验证的奇怪错误

Question

我正在使用 Angular 7 在我的产品页面组件表单上测试一个简单的登录功能，但我遇到了这种奇怪的行为。如果存在错误，我会尝试显示适当的验证消息，比如如果它不是有效的电子邮件，则应该显示“必须是有效的电子邮件”消息，如果该字段是留空，“email is required”，应该显示错误，当您开始输入时，required 消息消失，只有有效的电子邮件错误消息显示。这是我的代码。

Addproduct.component.html

所以现在，如果错误存在但它不起作用，我将尝试呈现跨度消息。

<form [formGroup]="loginForm" class="login-container" (ngSubmit)="login()">            
    <p>
        <input class="form-control" type="email" placeholder="Email here" formControlName="email">
        <span *ngIf="f.email.errors.required">email is required</span>
        <span *ngIf="f.email.errors.email">must be a valid email</span>
    </p>            
    <p>
        <input class="form-control" type="password" placeholder="Password here" formControlName="password">
        <span *ngIf="f.password.errors.required">Password is required</span>
    </p>
    <p><button type="submit" class="btn btn-md btn-primary">Submit</button></p>        
</form>

Addproduct.component.ts

这是控制器，我尝试使用验证规则的简称，但仍然无济于事。

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

@Component({
  selector: 'app-addproduct',
  templateUrl: './addproduct.component.html',
  styleUrls: ['./addproduct.component.css']
})
export class AddproductComponent implements OnInit {

  loginForm:FormGroup;
  isSubmitted:boolean = false;

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

  ngOnInit() { 
    this.loginForm = this.fb.group({           
      email : ['',  [Validators.required,Validators.email]],    
      password : ['', [Validators.required,Validators.min(6)]]
    });
  }

  get f(){
    return this.loginForm.controls;
  }

}

我也把验证脚本改成了这个，但还是没用

ngOnInit() { 
   this.loginForm = this.fb.group({           
      email : new FormControl('',  [Validators.required,Validators.email]),    
      password : new FormControl('', [Validators.required,Validators.min(6)])
   });
}

我收到了这个错误

Answer 1

您正在检查可能不存在错误的地方是否存在错误。

你想要这样的东西：

f.email.errors?.required

甚至：

f.email?.errors?.required

对密码字段和首次调用时属性可能不存在的其他任何地方执行相同的操作。

Answer 2

您也可以使用

<span *ngIf="loginForm.hasError('required', ['password'])">Password is required</span>

在我看来这要容易得多。

Angular 反应式表单验证的奇怪错误

Strange errors with Angular Reactive Forms Validation

javascript

typescript

angular-validation

angular

angular-reactive-forms