How to set the disabled/ readonly option dynamically to the form properties/attributes [Question]

[Kadhiresan-K]

While rendering the Form, Any input controls created with default behavior should be changed into read-only mode dynamically based on some scenario(s).

scenario 1: If normal user logins, they can only see their email address (email field should not be editable)
scenario 2: If admin logins, they can change the user address (full privileges)

Note: User-based customizations like the normal user login should get the control ready-only/mandatory/hidden and the users like admins should have full privilege on the control(s).

I am using Angular 9
formiojs: "^4.8.0-rc.12"
angular-formio: "^4.6.7"

Any suggestions on how to do it? Any documentation for reference? Will appreciate any help

[travist]

You can achieve this with Logic. The trigger will need to reference the logged in user like so.

result = Formio.getUser().roles.indexOf('----- admin id -----') !== -1;

[Kadhiresan-K]

@travist thanks a lot for the response

But my doubt is, I want to make the input field as readOnly/disabled based on my custom condition while rendering the Form dynamically.

For example, If I add readOnly=" true", its making entire from as read-only mode (Ref the attached screenshot below)

Here how I will make the input field "Email" alone as read-only based on my custom condition, while rendering the form?

Any suggestions/documentation/reference will help, Thanks.

[travist]

You would just attach Logic to that field specifically and not the whole form. The Logic tab can be found by editing that component and then clicking on the Logic tab.

[Kadhiresan-K]

@travist thanks for the response

I will try with the Logic tab when creating a new Form.

Also for dynamic customization, when rendering the form I am adding the conditions like below for some scenarios.
Iterate over the form components and set the flags on any fields.

for (const control of inputFromJSON) {
if (control.key == 'email') {
// read-only
control.disabled = true;
}
if (control.key == 'phone_number') {
// mandatory
control.validate.required = false;
}
if (control.key == 'pin_code') {
// hidden
control.hidden = false;
}
}
this.formjson = { components: inputFromJSON }

[Nabinsharma123]

like in documentation
we can set value of a component like this

const email = form.getComponent('email');
email.setValue('joe@examle.com');

is there any funtion like "setDisabled" to set the disable property of a component