如何使用 api 以角度验证电子邮件地址？

Question

How to validate email address in angular?.

When I submit the form and my email is like admin@g it doesn't detect it as a error . I am using angular with laravel API.

<div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" name="email" [(ngModel)]="form.email" #email="ngModel" [ngClass]="{'is-invalid': f.submitted && email.invalid}"
              required email placeholder="Enter your email address"/>
            <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
              <div *ngIf="email.errors.required">>> required</div>
              <div *ngIf="email.errors.email">>> must be a valid email address</div>
            </div>
          </div>    

Answer 1

As others have pointed out, your example email address (admin@g) looks correct. What you want is to use an API which checks if the email address is really correct. You can use a service like Real Email that does in depth email address checks to test that the account is active.

In Angular you can create an async form validator like ..

@Injectable({ providedIn: 'root' })
export class AsyncEmailValidator implements AsyncValidator {
  private apiKey?: string; // put your api key here
  constructor(private http: HttpClient) {}

  validate(
    ctrl: AbstractControl
  ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    if (ctrl.value) {
      return this.http
        .get<{ status: string }>('https://isitarealemail.com/api/email/validate', {
          params: { email: ctrl.value },
          headers: {
            Authorization: this.apiKey ? 'Bearer ' + this.apiKey : [],
          },
        })
        .toPromise()
        .then((result) => {
          if (result.status === 'invalid') {
            return { invalid: true };
          } else if (result.status === 'unknown') {
            return { invalid: true };
          } else {
            // status is valid
            return null;
          }
        });
    } else {
      return Promise.resolve({invalid: true});
    }
  }
}

Then you can use that in your form definition.

emailFormControl = new FormControl('', {
    updateOn: 'blur',
    asyncValidators: [this.emailValidator.validate.bind(this.emailValidator)],
});

Then bind to it in html

<input [formControl]="emailFormControl" />

For a more in depth article see angular email validation and get an api key to unlock the usage limit at Real Email