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?

score 17 · Accepted Answer · answered Aug 02 '18 at 09:05

17

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

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

answered Aug 02 '18 at 09:05

rpeshkov

Thanks ..Its fine now. – Abx Aug 02 '18 at 09:10
@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. – Abedin.Zhuniqi Apr 02 '19 at 12:29

Amit Chigadani · Answer 2 · 2018-08-02T09:14:14.357

10

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

this.myControl.setValue('contact');

edited Aug 02 '18 at 09:14

answered Aug 02 '18 at 09:04

Amit Chigadani

He has no form. – Aug 02 '18 at 09:04
And it should be a comment. – Aug 02 '18 at 09:05
@trichetriche Why comment? Can you please remove the downvote? – Amit Chigadani Aug 02 '18 at 09:07
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. – Aug 02 '18 at 09:09
I have edited it, but `patchValue` and `setValue` are almost same w.r.t to form Controls – Amit Chigadani Aug 02 '18 at 09:12
Agreed, but you did gave both documentation, so it's fine by me ! – Aug 02 '18 at 09:13
1

Thanks :) short & straight forward answer. – Prasad Patel May 03 '19 at 20:47

score 0 · Answer 3 · answered Mar 05 '20 at 11:55

0

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

answered Mar 05 '20 at 11:55

Daniel Danielecki

3 Answers3