Angular 5表单验证电子邮件

<!-- app.component.html -->
<form #emailForm="ngForm" (ngSubmit)="onSubmit(emailForm)">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" ngModel required email>
  <div *ngIf="emailForm.controls.email.invalid && (emailForm.controls.email.dirty || emailForm.controls.email.touched)">
    <div *ngIf="emailForm.controls.email.errors.required">
      Email is required.
    </div>
    <div *ngIf="emailForm.controls.email.errors.email">
      Invalid email format.
    </div>
  </div>
  <button type="submit" [disabled]="emailForm.invalid">Submit</button>
</form>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onSubmit(form) {
    if (form.valid) {
      console.log('Form submitted:', form.value);
    }
  }
}

<!-- app.component.html -->
<form [formGroup]="emailForm" (ngSubmit)="onSubmit()">
  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">
  <div *ngIf="emailForm.get('email').invalid && (emailForm.get('email').dirty || emailForm.get('email').touched)">
    <div *ngIf="emailForm.get('email').errors.required">
      Email is required.
    </div>
    <div *ngIf="emailForm.get('email').errors.email">
      Invalid email format.
    </div>
  </div>
  <button type="submit" [disabled]="emailForm.invalid">Submit</button>
</form>

// app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  emailForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.emailForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.emailForm.valid) {
      console.log('Form submitted:', this.emailForm.value);
    }
  }
}