proto-form/src/populateFields.ts

A typescript base library for managing native javascript forms. Handles onChange events, and normalizing data flow. Leverages native javascript events.

export function populateForm(formElement: HTMLFormElement, values: any) {
    // ... (initial checks for formElement and values) ...
  
    for (const name in values) {
      if (values.hasOwnProperty(name)) {
        const element = formElement.elements[name];
        const dataValue = values[name]; // The value from your data object for this name
  
        if (element) {
          // Check for RadioNodeList (common for radios and checkboxes)
          // Note: instanceof RadioNodeList might not be universally reliable,
          // checking type/length is often safer.
          if (element.length && typeof element.length === 'number' && typeof element[0] !== 'undefined' && element[0].type) { // Check if it behaves like a list of elements
  
            const elementType = element[0].type; // Get type from the first element
  
            if (elementType === 'radio') {
              const valueToSelect = String(dataValue); // Data should be single value
              element.forEach(radio => {
                radio.checked = (radio.value === valueToSelect);
              });
            } else if (elementType === 'checkbox') {
              const valuesToCheck = Array.isArray(dataValue) ? dataValue : [dataValue]; // Ensure data is array
              element.forEach(checkbox => {
                checkbox.checked = valuesToCheck.includes(checkbox.value);
              });
            } else {
              // Handle multiple text inputs etc. (like Scenario 4)
              const valuesToSet = Array.isArray(dataValue) ? dataValue : [];
              const len = Math.min(element.length, valuesToSet.length);
              for (let i = 0; i < len; i++) {
                 if(element[i]) element[i].value = valuesToSet[i]; // Check element exists
              }
               for (let i = len; i < element.length; i++) { // Clear extras
                  if(element[i]) element[i].value = '';
               }
            }
          } else if (element.type === 'select-multiple') {
            const valuesToSelect = Array.isArray(dataValue) ? dataValue : [dataValue]; // Ensure data is array
            for (let i = 0; i < element.options.length; i++) {
              element.options[i].selected = valuesToSelect.includes(element.options[i].value);
            }
          } else if (element.type === 'checkbox') { // Single checkbox
             element.checked = Boolean(dataValue);
          } else if (element.type === 'select-one') {
             element.value = dataValue;
          } else { // Default for text, email, number, hidden, textarea, etc.
            element.value = dataValue;
          }
        } else {
          console.warn(`No form element found with name: ${name}`);
        }
      }
    }
  }