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
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 Angular, a reactive form is a FormGroup that is made up of FormControls. The FormBuilder is the class that is used to create both FormGroups and FormControls.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With