Angular 5 bilden Dubletten Eingangswert

Question

ich eine einfache Form haben:

this.searchForm = this.formBuilder.group({ 
    query: [ null, [Validators.required] ] 
}); 

Wenn Benutzer Paste etwas in die Eingabe umformatieren I-Werte Regex und das Formular aktualisieren.

onPaste(event) { 
    const formattedQuery = event.clipboardData.getData('text/plain') 
     .split(/,?[\r\n\t]+\s?/) 
     .join(', ') 
     .replace(/,\s?$/g, ''); 

    this.searchForm.get('query').setValue(formattedQuery); 
    // this.ref.detectChanges(); 
    } 

Aber wenn ich etwas einfügen, zum Beispiel

325435956 
325435956 

Es duplizieren und als Ergebnis sehe ich 325435956, 325435956 325435956 325435956 aber ich erwarte 325435956, 325435956 zu sehen. Wo ist mein Fehler und wie kann ich das beheben?

Arbeitsbeispiel finden Sie hier https://stackblitz.com/edit/angular-cp9yhx?file=app%2Fhello.component.ts

Answer 1

Auch wenn Sie die Paste-Funktion umgehen, wird das Standardverhalten unverändert gelassen.

Also behandelt es zuerst die Methode und druckt die erwarteten Werte aus. Und fügt dann die Werte so ein, wie sie sind.

Sie sollten das Standardverhalten verhindern.

onPaste(event) { 
    event.preventDefault(); 

    //rest of the method as it is right now 
} 

Fest Beispiel: https://stackblitz.com/edit/angular-7orqb9?file=app/hello.component.ts