How to make APS form fields read-only programmatically on ADF

2020-03-03

To make an APS form field read-only, you need to access its FormFieldModel. Once you have that, you can compare its field.id to determine if it’s the field you want to disable, and make it read-only using the parameter field.readonly.

setReadonlyFields(formFieldModel: FormFieldModel[]) {
  formFieldModel.forEach(oneField => {
    if (this.readonlyFieldList.includes(oneField.id)) {
      oneField.readOnly = true;
    }
  });
}

To access the form field model list, you need to wait until the form is loaded.

setFormLoadedEvent() {
  this.formService.formLoaded.subscribe((event: FormEvent) => {
    // once the form is loaded, set read-only fields
    if (event.form.id !== null) {
      this.setReadonlyFields(event.form.getFormFields());
    }
  });
}

All the code together.

import { Component, OnInit } from '@angular/core';
import { FormEvent, FormFieldEvent, FormFieldModel, FormModel, FormService, FormOutcomeEvent } from '@alfresco/adf-core';

@Component({
  selector: 'app-your-aps-form-component',
  templateUrl: './your.component.html', 
  styleUrls: ['./your.component.scss']
})

export class YourApsFormComponent implements OnInit {
  readonlyFieldList = ['id1', 'id2', 'id3'];
  
  constructor(private formService: FormService) {}
  
  ngOnInit() {
    this.setFormLoadEvent();
  }
  
  setFormLoadedEvent() {
    this.formService.formLoaded.subscribe((event: FormEvent) => {
      // once the form is loaded, set read-only fields
      if (event.form.id !== null) {
        this.setReadonlyFields(event.form.getFormFields());
      }
    });
  }
  
  setReadonlyFields(formFieldModel: FormFieldModel[]) {
    formFieldModel.forEach(oneField => {
      if (this.readonlyFieldList.includes(oneField.id)) {
        oneField.readOnly = true;
      }
    });
  }
}
Views: 474