如何在Angular formBuilder邮箱正则验证前修剪尾部空白字符

你要的修剪邮箱末尾空白字符的功能可以通过以下两种方式实现：

方案1：验证提交时处理（改动最小） #

直接在执行验证逻辑前，先对邮箱输入框的值做末尾空白修剪，修改validateEmail方法即可：

validateEmail() {
    // 新增：修剪邮箱末尾空白后再写回表单控件
    const emailControl = this.registerForm.get('userName');
    if (emailControl?.value) {
      emailControl.setValue(emailControl.value.trimEnd(), { emitEvent: false });
    }

    this.submitted = true;
    if (this.registerForm.invalid) {
      console.log('Invalid');
      return;
    }
    console.log(this.registerForm.value.userName + ' is a valid Email');
}

这种方式只需要修改提交逻辑，不需要改动其他代码，适合快速上线需求。

要是需要兼容老旧浏览器，可以把trimEnd()替换为正则替换写法replace(/\s+$/, '')，效果完全一致。

方案2：输入阶段自动修剪（体验更好） #

用户输入过程中自动去掉末尾的空白字符，不需要等点击验证才处理，直接在输入框绑定input事件即可：

改动HTML代码： #

<input
  [ngClass]="{
    'is-invalid': submitted && f.userName.errors,
    blueLine: submitted && f.userName.errors
  }"
  type="text"
  formControlName="userName"
  <!-- 新增input事件处理 -->
  (input)="trimEmailEnd($event)"
/>

新增TS处理方法： #

trimEmailEnd(e: Event) {
  const input = e.target as HTMLInputElement;
  input.value = input.value.trimEnd();
  // 同步更新表单控件值
  this.registerForm.get('userName')?.setValue(input.value, { emitEvent: false });
}

这种方式用户输入时就看不到末尾多余的空格，体验更流畅。

内容的提问来源于stack exchange，提问作者Santhosh