Cannot assign to 'value' because it is a constant or a read-only property. Angular 6

Question

I am trying to set a value to a Mat input using FormControl

<input name="contact" matInput [matAutocomplete]="contactAuto"  [formControl]="myControl" #contact (blur)="validateInput($event, contact.value)"  >

In my Ts

myControl = new FormControl();
this.myControl.value = 'contact';

The above code is working fine but I get an error

Cannot assign to 'value' because it is a constant or a read-only property

Am I missing something here?

Dished

Answer 1

It's not allowed to set value like you are trying. You need to either use setValue or patchValue methods.

https://angular.io/api/forms/FormControl#setvalue

https://angular.io/api/forms/FormControl#patchvalue

For FormControl they're identical, but those methods work differently for i.e. FormGroup.

Alyce

Thanks ..Its fine now. – Dished

@rpershkov Can you help me on something, because I am trying the same thing and I tried to use patchValue or setValue but it doesn't change the value of the formGroup. If you can we can we can discuss in a chat. – Newlywed

Answer 2

That is not the way to set value. Correct way to set is using setValue() or patchValue()

this.myControl.setValue('contact');

Viridescent

He has no form. – Brolly

And it should be a comment. – Brolly

@trichetriche Why comment? Can you please remove the downvote? – Viridescent

Because you are giving a one liner to a person that didn't read the documentation. If you want me to remove my downvote, you're going to edit your answer to link the documentation and cover patchValue, then I'll give you an upvote. – Brolly

I have edited it, but patchValue and setValue are almost same w.r.t to form Controls – Viridescent

Agreed, but you did gave both documentation, so it's fine by me ! – Brolly

Thanks :) short & straight forward answer. – Convention

Answer 3

In terms of contact form to make it invalid manually this one worked for me this.contactForm.setErrors({ valid: false });

Allan

Answer 4

You can use setValue or patchValue to achieve this. The difference is as follows.

• PatchValue is used to update only a subset of the elements of the FormGroup or FormArray. It will only update the matching objects and ignores the rest.
• SetValue is used to update the FormControl , FormGroup or FormArray. When we use it to update the FormGroup or FormArray the SetValue requires that the object must match the structure of the FormGroup or FormArray exactly. Otherwise, it will result in an error.

Inconclusive