How to set only a single FormControl to disabled.
I have a form with a field in the form model that should not be changed by the user and is filled automatically for create forms. I would still like to display this field to the user, but disable the input.
I tried the following, but the readOnlyProperty is still editable.
public baseForm = createForm<Entity, EntityFormModel>(this, { formType: FormType.ROOT, disabled$: this.disabled$, input$: this.input$, output$: this.updatedEntity, manualSave$: this.manualSave$, formControls: ChartFormComponent.getFormControls(), toFormGroup: (obj: Entity): EntityFormModel => { return mapEntityToEntityFormModel(obj); }, fromFormGroup: (formValue: EntityFormModel): EntityUnion => { return mapEntityFormModelToEntity(formValue); } });
private static getFormControls(): Controls<EntityFormModel> { return { // Should be disabled, but still shown to the user. readOnlyProperty: new FormControl({disabled: true}), discriminator: new FormControl(null), // Should and is editable. property: new FormControl(null) } }
Yup I think this relates to a known issue with Angular on which I gave my input here: https://github.com/angular/angular/issues/11447#issuecomment-584740317
I think your best move for now is to either
simply display it without using an input (and therefore no need to make it disabled)
OR
Disable the input then use the remap function in the create form to read the value using the raw attribute or function on the form (can't remember on top of my head right now) and pass that instead of the classic form value that ngx sub form uses by default.
Hopefully that makes sense, I replied quite quickly, if it doesn't let me know