Angular: How to make ChangeDetector work with nulls and no spaces with PatchValue

Question

I am doing Patch Value to set a value of a field. Currently using Reactive forms.

Setting patchValue works.

this.addressForm.patchValue({city:'Atlanta'});

Now when trying to clear/reset the field, patchvalue works only with 1 space

this.addressForm.patchValue({city:' '});
this.cdr.detectChanges();

it does not work with null or '' (0 space)

Is there a way to make ChangeDetection work with null?

Resources:

I have a such a large company project confidential, trying to see what setting is occuring, just wondering if there are any special cases or exceptions to using patchValue — , Nov 12 '19 at 07:39
You can just create only app.component with 2 fields and show when you are calling `this.product.patchValue({city:'Atlanta'});` — Adrita Sharma, Nov 12 '19 at 07:40
Try detecting the changes after you set/patch the value. Can you show some html too? — Athanasios Kataras, Nov 12 '19 at 08:21
You say you cannot make a stackblitz, sure you can, it's a great way to provide a [mcve] to the question. Here, I made one for you (with Kendo textbox like you say in comment you use). Reproduce the issue in the stackblitz, because based on the information we have now, this should work just fine: https://stackblitz.com/edit/angular-xjcyjw-rpviv9?file=app/app.component.ts — AT82, Nov 12 '19 at 18:46

Athanasios Kataras · Answer 1 · 2019-11-12T07:59:42.947

0

I think what you are doing is trying to patch a value that does not have that property:

Use the patchValue() method to replace any properties defined in the object that have changed in the form model.

My guess is that your input does not have the property.

That would be because you are changing the value to string and even if you have set the value before, then it is updated.

Ofcourse the string does not contain the city property.

Ok, Now that you updated the code, I think you are falling into this problem

edited Nov 12 '19 at 07:59

answered Nov 12 '19 at 07:44

If you are going on a single control (like product) then you should use setValue to update the individual value. – Athanasios Kataras Nov 12 '19 at 07:57
Check the updated answer, I linked you to another question about change detection. – Athanasios Kataras Nov 12 '19 at 08:03
Do you by any chance, have ngModel on the input too? – Athanasios Kataras Nov 12 '19 at 08:07
hi, I added more notes, no NgModel – Nov 12 '19 at 08:15
posted some more code, we are using Kendo text box by the way – Nov 12 '19 at 08:31

score 0 · Answer 2 · answered Nov 12 '19 at 07:52

0

try this

this.FormGroup.patchValue({['city']: 'Atlanta'});

answered Nov 12 '19 at 07:52

Arvind

2 Answers2