在 HTML 文件中，可以使用 Angular 的 Form 模块中的 input 组件并添加 type="email" 属性来创建电子邮件输入框。然而，由于浏览器不会自动完成电子邮件地址，因此需要使用 Angular 的相关函数来实现这一功能。

可以使用 Angular 的 ReactiveFormsModule 和 FormGroup 类来创建一个包含邮箱输入框的表单组。使用 FormGroup 时，可以订阅 .valueChanges 属性来检测输入框的变化，然后使用过滤器来过滤邮箱地址。最后，将过滤后的输入绑定到相应的属性上。

下面是一些示例代码：

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

@Component({
  selector: 'app-email-form',
  templateUrl: './email-form.component.html',
  styleUrls: ['./email-form.component.scss']
})
export class EmailFormComponent {

  emailForm = new FormGroup({
    email: new FormControl('', [
      Validators.required,
      Validators.email
    ])
  });

  get email() { return this.emailForm.get('email'); }

  constructor() { }

  onSubmit() {
    console.log(this.emailForm.value);
  }
}

在 HTML 文件中，将 emailForm 与组件的元素绑定，然后使用 FormGroup 中的控件名获取输入：

  
  Submit

这将创建一个包含电子邮件输入框和提交按钮的表单，可以通过过滤器自动完成电子邮件地址。