Disable input on angular form

You shouldn't be using disabled with reactive forms. Instead, put the logic on the code behind (ts file):

this.form.get('lastname').disable();

// this.form.get('lastname').enable();

Be aware that these methods have optional arguments to control wether you want to fire change event (this.form.get('lastname').valueChanges), which is the default behavior.

About your question (I got it right later on the comments): you can use this.form.getRawValue() to retrieve all fields values (including the disabled ones). Checkout it out on the docs: https://angular.io/api/forms/FormGroup#getrawvalue

Actually, as @jo_va said, maybe the readonly field is more appropriate to get what you want (despite the fact that you cannot control it from the FormControl object).


If you disable a field in your form, this field won't be sent in the resulting JSON. If you want to forbid user input but still want the value to be included in your form object, you have to mark the field as readonly:

<input matInput formControlName="lastname" [readonly]="true">

In summary:

Use the readonly attribute to prevent the user from changing the control value, but you still want the value in your form object.

Use the disabled attribute to prevent the user from changing the control value and you don't want the value in your form object.


Please add readonly attribute to your input control.

[readonly]="true"