angular 反应式输入粘贴问题 + 指令

Question

我在使用 Reactive 表单中的指令粘贴文本输入时遇到问题。

您可以在 https://stackblitz.com/edit/angular-klzz2y 看到这个问题。在该文本框中输入诸如“$%FDG%$^GWE43j52409543”之类的内容，然后查看文本框中反映的新值与反应形式中的值之间的区别！

sample output (image)

这是指令

@Directive({
  selector: "[appEmailPart]"
})
export class EmailPartDirective {
  constructor(private _el: ElementRef) {}

  @HostListener("input", ["$event"]) onInputChange(event) {
    const initalValue = this._el.nativeElement.value;
    this._el.nativeElement.value = initalValue.replace(
      /[^A-Za-z0-9\.\ _\-]*/g,
      ""
    );
    if (initalValue !== this._el.nativeElement.value) {
      event.stopPropagation();
    }
  }
}

这里是html


<form [formGroup]="addUserDetailForm" (ngSubmit)="onSaveClick()">
<div>
    <input type="text" formControlName="emailPart" appEmailPart />
</div>
<div>
    <button type="submit">Save</button>
</div>
</form>

{{
  addUserDetailForm.value.emailPart
}}

和表格

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";

  addUserDetailForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.addUserDetailForm = this.fb.group({
      emailPart: ["", [Validators.required]],
    });
  }

  onSaveClick() {
    console.log('email part:', this.addUserDetailForm.value.emailPart);
  }
}

Answer 1

您可以使用 setValue() 方法更新反应式表单控件。

constructor(private _el: ElementRef, private _control : NgControl) {}

@HostListener("input", ["$event"]) onInputChange(event) {
    const initalValue = this._el.nativeElement.value;
    this._control.control.setValue(initalValue.replace(
      /[^A-Za-z0-9\.\ _\-]*/g,
      ""
    ));
    if (initalValue !== this._el.nativeElement.value) {
      event.stopPropagation();
    }
  }

angular 反应式输入粘贴问题 + 指令

angular input paste issue in reactive form + directive

angular

angular2-directives

angular-reactive-forms