Update Angular5 form immediately

Asked Dec 07 '17 at 15:52

Active Dec 08 '17 at 09:57

Viewed 491 times

I have a reactive form:

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

And onPaste method where I update my form value, but actually it doesn't update HTML input value until I change the focus out of the input.

constructor(
    private formBuilder: FormBuilder,
    private ref: ChangeDetectorRef
  ) { }

onPaste(event: any): void {
    const pastedQuery = event.clipboardData.getData('text/plain');

    const formattedQuery = pastedQuery
      .split(/,?[\r\n\t]+\s?/).join(', ')
      .replace(/,\s?$/g, '');

    this.searchForm.patchValue({
      query: formattedQuery
    });

    this.ref.detectChanges();
  }

I call onPaste method like this:

<input formControlName="query" type="search" (paste)="onPaste($event)">

I've found this question Angular FormGroup won't update it's value immediately after patchValue or setValue and trying detectChanges but it doesn't help me.

So, where is my mistake, or maybe there is another way to solve my problem?

edited Dec 08 '17 at 09:57

asked Dec 07 '17 at 15:52

rel1x

2,351
4
34
62

1

Thanks for the update) – yurzui Dec 07 '17 at 15:58
@yurzui `` – rel1x Dec 07 '17 at 15:58
I'll try: event.target.dispatchEvent( new Event( "input" ) ) ; but I'm not sure – Eliseo Dec 07 '17 at 17:10
or event.target.value=formattedQuery – Eliseo Dec 07 '17 at 17:31
Have you tried: `this.searchForm.get('query').setValue(formattedQuery)`? – Chau Tran Dec 07 '17 at 18:23
@ChauTran it has the same behaviour as `this.searchForm.patchValue({ query: formattedQuery });` – rel1x Dec 07 '17 at 21:42
https://stackblitz.com/edit/angular-zcbwry I don't know what behavior you're expecting but FormGroup's updating value just fine... – Chau Tran Dec 08 '17 at 02:00
@ChauTran looks like it updates immediately – rel1x Dec 08 '17 at 09:52

Update Angular5 form immediately

0 Answers0