Differences

This shows you the differences between two versions of the page.

--- newdevs:code:angular-field-order [2023/01/19 12:32] – created tmccanna
+++ newdevs:code:angular-field-order [2023/02/14 13:19] (current) – [Control Angular Form Field Order] tmccanna
@@ Line 2: / Line 2: @@
 ====== 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:
-===== Things to add to this page: =====
+  <eg-fm-record-editor #editDialog idlClass="{{idlClass}}"
+    [preloadLinkedValues]="true"
-  * Create example of controlling the form field order on a modal - use the patch here to work from: https://bugs.launchpad.net/evergreen/+bug/1857351
+    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.