How to make a formControl readonly

Question

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

Answer 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!