Question

我有一个Angular2应用，我想利用系统其他地方使用的现有电子邮件验证服务。这是一个REST API，我只是向其发送电子邮件，它返回一个带有一些值的对象，其中一个是布尔值valid。我还希望以相同的形式（例如，同一表格中的两个电子邮件字段）使此功能可重复使用和多次使用。

首先，我提供了一个具有validateEmail方法的服务，该方法执行实际的GET调用，并将响应json映射到UserEmailVerification对象

然后，我为EmailComponent提供了imports服务，并使用了一个防反跳的方法来调用它。

import {Component, Input, OnInit} from '@angular/core';
import {UserEmailVerification} from "../../model/email/email-verification.model";
import {ValidateEmailService} from "../../services/validate-email.service";
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-email',
  templateUrl: 'email.component.html',
  styleUrls: ['email.component.scss']
})
export class EmailComponent implements OnInit {
  @Input()
  public email: string = "";
  public label: string = "";
  public error: string = "";
  public validate: Subject<any> = new Subject();

  constructor(
    private _validateEmailService: ValidateEmailService
  ) {}

  ngOnInit() {
    this.validate
      .pipe(debounceTime(600))
      .subscribe(() => {
        this._validateEmailService.validateEmail(this.email).subscribe( (userEmailVerification: UserEmailVerification) => {
          if (userEmailVerification.valid === true) {
            this.error = "";
          } else {
            this.error = "This is not a valid email address.";
          }
        });
        }
      );
  }

  public input(e) {
    this.validate.next();
  }
}

然后，我将EmailComponent导入到处理表单的组件中，并将EmailComponent的选择器元素包括在表单视图中。 EmailComponent的视图如下：

<label>
  {{ this.label }}
  <input type="text" name="email" class="email" placeholder="bob.smith@someemail.com" [(ngModel)]="email"
     (input)="this.input($event)">
  <p class="error" *ngIf="this.error">{{ this.error }}</p>
</label>

这有效，并且在您键入电子邮件时，防反跳有效并给出预期的验证错误。但是，它没有连接到父组件/表单，因此验证无关紧要，并且在表单中填写它不会更新父组件。

那么我的问题是双重的，这是实现自定义电子邮件验证程序以便可以在多个位置使用的最佳角度方法吗？如果没有，那是什么？如果是，如何连接两个组件，以便将经过验证的电子邮件组件/字段映射到父组件的属性？

Answer 1

只需在root上的angular6项目验证器/email.ts中创建一个文件 email.ts：

import { FormControl } from '@angular/forms';
export class EmailValidator {

    static isValid(control: FormControl) {
        const re = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(control.value);

        if (re) {
            return null;
        }

        return {
            "invalidEmail": true
        };

    }
}

，然后在我想在component.ts文件中对其进行验证的组件中，

import { EmailValidator } from '../validator/email';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

export class CreateComponent implements OnInit, AfterViewInit {
  createForm: FormGroup;
constructor(public formBuilder: FormBuilder) {
    this.validateForm()
  }
 validateForm() {
    this.createForm= this.formBuilder.group({

      email: ['', Validators.compose([Validators.required, EmailValidator.isValid])],

    })
  }
}

现在在component.html中，您可以在其中输入要输入的电子邮件日期：

    <form [formGroup]="AgentForm" novalidate>
<div>
     <input type="email" class="form-control" [(ngModel)]="this.email" formControlName="email" placeholder="Enter email">
        </div>
//error message you want to show
<div *ngIf="!createForm.controls.email.valid  &&
        createForm.controls.email.dirty">
          <span>Invalid email address.</span>
        </div>
</form>

Angular电子邮件验证组件/服务

1 个答案: