电子邮件验证与 Angular Reactive 表单中所需的重叠

Question

使用 Angular Reactive Forms 验证电子邮件。

我添加了所需的验证程序和验证程序电子邮件，但它显示两者，如下图所示。我只想一次显示一个错误。

HTML 代码：

<form [formGroup]="NamFomNgs">

    <label>Email : 
        <input type="email" name="MylHtm" formControlName="MylNgs">
    </label><br>
        <div class="ErrMsgCls" *ngIf="(NamFomNgs.controls['MylNgs'].touched || NamFomNgs.controls['MylNgs'].dirty) && 
            !NamFomNgs.controls['MylNgs'].valid">
            <span *ngIf="NamFomNgs.controls['MylNgs'].errors.required">This field is required</span>
            <span *ngIf="NamFomNgs.controls['MylNgs'].errors.email">Enter valid email</span>
        </div><br>

    <button [disabled]="!NamFomNgs.valid">Submit</button>
</form>

打字稿代码：

NamFomNgs:FormGroup;

constructor(private NavPkjVaj: ActivatedRoute, private HtpCncMgrVaj: HttpClient,private FomNgsPkjVaj: FormBuilder)
{
    this.NamFomNgs = FomNgsPkjVaj.group(
        {
            MylNgs:[null,Validators.compose([
                Validators.required,
                Validators.email ])]
        });
}

我觉得这是一个有角形式的错误。

Answer 1

您可以创建通用组件来显示验证消息：

带有错误消息的自定义验证

HTML：

<div *ngIf="errorMessage !== null">
    {{errorMessage}}
</div>

控制消息.component.ts：

import { OnInit } from '@angular/core';
import { Component, Input } from '@angular/core';
import { FormGroup, FormControl, AbstractControl } from '@angular/forms';

import { CustomValidationService } from '../custom-validation.service'


export class ControlMessageComponent implements OnInit {

  ngOnInit() {

  }
  @Input() control: FormControl;

  constructor() { }

    /**
     * This method is use to return validation errors
     */
  get errorMessage() {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return CustomValidationService.getValidatorErrorMessage(this.getName(this.control), propertyName, this.control.errors[propertyName]);
      }
      if (this.control.valueChanges) {
        return CustomValidationService.showValidatorErrorMessage(propertyName, this.control.errors[propertyName])
      }
    }
    return null;
  }

    /**
     * This method used to find the control name
     * @param control - AbstractControl
     */
  private getName(control: AbstractControl): string | null {
    let group = <FormGroup>control.parent;

    if (!group) {
      return null;
    }
    let name: string;
    Object.keys(group.controls).forEach(key => {
      let childControl = group.get(key);
      if (childControl !== control) {
        return;
      }
      name = key;
    });
    return name;
  }
}

Answer 2

试试这个，让我知道是否有帮助：

HTML

<form [formGroup]="NamFomNgs">

    <label>Email : 
        <input type="email" name="MylHtm" formControlName="MylNgs">
    </label><br>
        <div class="ErrMsgCls" *ngIf="(NamFomNgs.controls['MylNgs'].touched || NamFomNgs.controls['MylNgs'].dirty) && 
            !NamFomNgs.controls['MylNgs'].valid">
            <span class="invalid-feedback" *ngIf="NamFomNgs.controls['MylNgs'].errors.required">This field is required</span>
            <span class="invalid-feedback" *ngIf="NamFomNgs.controls['MylNgs'].errors.email">Enter valid email</span>
        </div><br>

    <button [disabled]="!NamFomNgs.valid">Submit</button>
</form>

SCSS

.ErrMsgCls {
    .invalid-feedback {
        display: none;
    
        &:first-of-type {
            display: inline-block;
        }
    }
}