Как создать универсальный класс для создания формы на JS?

Question

[yura_born]

Всем привет!
Помогите мне разобраться, мне на страницу нужно вывести практически одинаковые 2 формы с разными инпутами:
Написал класс для формы:

import Button from '../button/button';
import InputField from './inputField';

export default class Form {
  id = '';
  classes: string[] = [];

  constructor(id: string, ...classes:string[]) {
    this.id = id;
    this.classes = classes;
  }

  render():HTMLElement {
    const element = document.createElement('form');
    this.classes.forEach(className => element.classList.add(className));
    element.setAttribute('id', this.id);
    element.innerHTML = `
        ${new InputField('text', 'carName', 'create-name', '', 'create-name').render().outerHTML}
        ${new InputField('color', 'create-color', 'create-color', '#FFFFFF', 'create-color').render().outerHTML}
        ${new Button('submit', 'create-car-submit', 'Create', 'btn', 'blue') .render().outerHTML}
`;
    return element;
  }
}

А также класс для инпутов:

export default class InputField {
  classes: string[] = [];

  constructor(
    readonly typeInput: string,
    readonly nameInput: string,
    readonly id: string,
    readonly value: string,
    ...classes:string[]
  ) {

    this.typeInput = typeInput;
    this.nameInput = nameInput;
    this.id = id;
    this.value = value;
    this.classes = classes;
  }

  render(): HTMLElement{
    const element: HTMLElement = document.createElement('input');
    this.classes.forEach(className => element.classList.add(className));
    element.setAttribute('type', this.typeInput);
    element.setAttribute('id', this.id);
    element.setAttribute('name', this.nameInput);
    element.setAttribute('value', this.value);
    return element;
  }
}

Экземпляр класса формы помещаю на страницу:

const html = `
    <div class="main-container">    
    <div class="top-menu">
      ${new Button('', 'menu-garage-btn', 'To garage', 'btn', 'green') .render().outerHTML}
      ${new Button('', 'menu-winners-btn', 'To winners', 'btn', 'green') .render().outerHTML}
    </div>
    <div class="settings-wrp" id="settings">
      ${new Form('form-create-car', 'settings', 'settings-form').render().outerHTML}


      <form action="" class="settings-form" id="form-update-car">
        <input type="text" class="update-name" id="update-name" disabled>
        <input type="color" class="update-color" id="update-color" value="#FFFFFF" disabled>
        <button class="btn blue disabled" data-id="-1" id="update-car-submit" type="submit">Update</button>
      </form>
    </div>
    <div class="control-race-btn-wrp">
      <button class="btn green" id="btn-start-race">Race</button>
      <button class="btn green" id="btn-reset-race">Reset</button>
      <button class="btn blue" id="btn-generate-cars">Generate cars</button>
    </div>
  
    <div class="garage-wrp" id="garage-wrp">
    <h2>Garage (${store.garage.carsCount})</h2>
    <h3>Page # ${store.garage.carsPage}</h3>
    <div>
      ${store.garage.showGarage().join('')}
    </div>
    <div class="pagination-wrp" id="pagination-wrp">
      <button class="btn blue ${btnPrevGarageState}" id="btn-garage-prev">Prev</button>
      <button class="btn blue ${btnNextGarageState}" id="btn-garage-next">Next</button>
    </div>
    </div>
  
    <p class="winner-text invisible" id="winner-text"></p>
  
    <div class="winners-view hidden" id="winners-view">
   
    </div>  
  </div>
    `;
    const root = document.createElement('div');
    root.setAttribute('id', 'app');
    root.innerHTML = html;
    document.body.appendChild(root);
  };

Все отрабатывает хорошо, но мне нужна еще одна такая же форма только инпуты у нее будут другие (другие классы и id). Натолкните на мысль как сделать класс формы более универсальным? Не писать же под другую форму свой метод render? Может кто-нить сталкивался?

Comments

[Сергей Котов]

пускай форма принимает массив объектов с инпутами {type: input | textarea; classNames: string[], id: string}, и по форику будешь создавать и аппендить куда надо

[yura_born]

Сергей Котов, Тоже так думал, но посчитал не очень красивым решением, ок, спс сейчас попробую

[Сергей Котов]

yura_born, вообше это у вас mvc? как вы собираетесь обрабатывать событие ввода, клика?

[yura_born]

Сергей Котов, нет не mvc, потом листенеры накидываю

[yura_born]

Сергей Котов, чёт только не соображу, а как мне их foreach сюда закинуть?

element.innerHTML = `
        ${new InputField('text', 'carName', 'create-name', '', 'create-name').render().outerHTML}
        ${new InputField('color', 'create-color', 'create-color', '#FFFFFF', 'create-color').render().outerHTML}
        ${new Button('submit', 'create-car-submit', 'Create', 'btn', 'blue') .render().outerHTML}
`;

[Сергей Котов]

yura_born,

fields: {type: TypeEnum; classNames: string[]; id: string}[];

render() {
  const mappedFields: HTMLElement[] = this.fields.map(field => new InputField(field.type, ...field.classNames).render());
  this.element.append(...mappedFields);
  this.element.append(new Button('submit', 'create-car-submit', 'Create', 'btn', 'blue') .render());
}

[yura_born]

Сергей Котов, круть! заработало!!! Вставьте в ответ, отмечу решением! Спасибо за помощь!

Answer 1

[Сергей Котов]

fields: {type: TypeEnum; classNames: string[]; id: string}[];

render() {
  const mappedFields: HTMLElement[] = this.fields.map(field => new InputField(field.type, ...field.classNames).render());
  this.element.append(...mappedFields);
  this.element.append(new Button('submit', 'create-car-submit', 'Create', 'btn', 'blue') .render());
}