How to make a formControl readonly

AngularAngular Reactive-Forms

Angular Problem Overview

How to make a formControl in angular readonly

I know i can do it in html like

<input type="text" formControlName="xyz" readonly />

how to do it from JS Code and not html i.e in a model driven way

Angular Solutions

Solution 1 - Angular

> If you are using Reactive Forms you can assign it dynamically like in > the example code below (email field)

    this.registerForm ={
          first_name: ['', Validators.required],
          last_name: ['', Validators.required],
          email: new FormControl({value: null, disabled: true}, Validators.required),
          password: ['', Validators.compose([Validators.required,])],
          confirm_password: ['', Validators.required],

If you want to get all the values including disabled controls you should use:


> View method comment on source code

       * The aggregate value of the `FormGroup`, including any disabled controls.
       * If you'd like to include all values regardless of disabled status, use this method.
       * Otherwise, the `value` property is the best way to get the value of the group.
      getRawValue(): any;

Enjoy coding!

Solution 2 - Angular

In my guess there is no use of READONLY in a Reactive Form (Angular 2+).

In a normal HTML, CSS based project

> We use READONLY attribute to prevent user from type/select the > form control but we get value from the input. > > We use DISABLED attribute to prevent user from type/select the > form control and we dont get value from the input.

In an Angular 2+ CLI based Projects

> We don't need READONLY attribute to prevent user from type/select. > Because DISABLED attribute is enough to prevent user from type/select and also you > can get value from the disabled input/select/checkbox/radio field.

You can add disabled attribute to the field in model-driven way

While creating FormGroup

this.formGroupName ={
    xyz: [{ value: '', disabled: true }, Validators.required]

At Runtime

this.formGroupName.get('xyz').disable({ onlySelf: true });

Getting values from FormGroup (Edited)

To get values from not disabled fields only


To get values of all fields in the FormGroup


So here you don't need the READONLY attribute. Hope it helps.

Solution 3 - Angular

We can use any html attribute and bind it in angular using [].

So,you can use attribute binding for the attribute readonly in that control


<input type="text" formControlName="xyz" [readonly]="anyBooleanPropertyFromComponent" />

Solution 4 - Angular

For the reactive-forms, if you want to make the fields readonly, one way to do so would be to do with plain old javascript using:

(document.getElementById('abc') as HTMLInputElement).setAttribute('readonly','true');

In addition to this, you can convert the code to more typescript and angular way. Use @ViewChild to access the element and then set the readonly property to true:


<input [formControl]='data' id='abc' #element [readonly]="data.disabled"/>


@ViewChild('element',{static:true, read: ElementRef}) element : ElementRef ;
(this.element.nativeElement as HTMLInputElement).readOnly = true;

However, you will need to check for the status of the formControl before modifying the readonly property.

Solution 5 - Angular

Manually set formcontrol as disabled

control = new FormControl({ value: '', disabled: true })

Programmatically enable / disable

<button (click)="enable()">Enable</button>
<button (click)="disable()">Disable</button>

disable() {

enable() {

Solution 6 - Angular

If using form builder, with reactive forms:

this.customerForm ={
      customerName: [{value: null, disabled: true}, Validators.required],

Solution 7 - Angular

A simple solution is to set the formcontrol as not disabled:{
            some: new FormControl(
                value: parseInt(this.myobject.subObject.stringMember),
                disabled: false

and, at the same time, to set the <input> and/or <textarea> as readonly:

  • textarea:


  • input:


this works with input and textarea at least.


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAnkit RaonkaView Question on Stackoverflow
Solution 1 - AngularErvTheDevView Answer on Stackoverflow
Solution 2 - AngularSilambarasan R.DView Answer on Stackoverflow
Solution 3 - AngularSteveView Answer on Stackoverflow
Solution 4 - AngularSachin GuptaView Answer on Stackoverflow
Solution 5 - AngularWasiFView Answer on Stackoverflow
Solution 6 - Angularjames aceView Answer on Stackoverflow
Solution 7 - Angularuser1767316View Answer on Stackoverflow