How to make a formControl readonly

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

Solution 1:

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

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

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

    this.registerForm.getRawValue();

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:

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 = this.fb.group({
    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

this.formGroupName.value;

To get values of all fields in the FormGroup

this.formGroupName.getRawValue();

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

Solution 3:

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

e.g

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

Solution 4:

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:

HTML

<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.