User Tools

Site Tools


newdevs:code:angular-field-order

New Developers Working Group

Control Angular Form Field Order

If you do not specify the field order when opening an Angular form in a modal, the fields will be displayed in alphabetical order. This can be very confusing, so it is good practice to add a fieldOrder parameter to the relevant HTML file:

fieldOrder="field1,field2,field3"

An example of this in action can be seen in admin-carousel.component.html:

<eg-fm-record-editor #editDialog idlClass="{{idlClass}}" 
  [preloadLinkedValues]="true"
  fieldOrder="owner,name,type,age_filter,max_items,owning_lib_filter,
    copy_location_filter,active,id,bucket,last_refresh_time,creator,
    create_time,editor,edit_time"
  hiddenFieldsList="creator,editor,create_time,edit_time"
  [preSave]="mungeCarousel" (recordSaved)="postSave($event)"
  readonlyFields="last_refresh_time"
  [fieldOptions]="{bucket:{customTemplate:{template:bucketTemplate}},
    copy_location_filter:{customTemplate:{template:locationTemplate}},
    owning_lib_filter:{customTemplate:{template:orgTemplate}}}">
</eg-fm-record-editor>

Note that you can also make use of the hiddenFieldsList parameter for fields that do not need to show on the form, and of the readonlyFields parameter to make specified fields uneditable.

newdevs/code/angular-field-order.txt · Last modified: 2023/02/14 13:19 by tmccanna

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.