По совету Wilder из соседней ветки решил накидать SuperForm LWC Component.
Буду крайне признателен за core review :) и любые советы как улучшить качество компонента.
Пока компонент поддерживает 2 типа инпутов: text input и textarea
<template>
<template for:each={meta_} for:item="item">
<div key={item.id}>
<template if:true={item.isTextInput}>
<lightning-input type="text" label={item.label} data-field-name={item.name} value={item.value} onchange={fieldChangeHandler}></lightning-input>
</template>
<template if:true={item.isTextarea}>
<lightning-textarea label={item.label} data-field-name={item.name} value={item.value} onchange={fieldChangeHandler}></lightning-textarea>
</template>
</div>
</template>
</template>
import { api, LightningElement } from "lwc";
export default class SuperForm extends LightningElement {
@api
obj = {};
@api
meta = [];
obj_ = null;
meta_ = null;
connectedCallback() {
this.obj_ = JSON.parse(JSON.stringify(this.obj));
this.patchMeta();
}
patchMeta() {
let meta_ = []
let n = 0;
this.meta.forEach((item) => {
meta_.push({
...item,
id: n,
value: this.obj[item.name],
get isTextInput() {
return item.type === 'text';
},
get isTextarea() {
return item.type === 'textarea';
}
});
n++;
});
this.meta_ = meta_;
}
fieldChangeHandler(ev) {
let el = ev.target;
let fieldName = el.dataset.fieldName;
this.obj_[fieldName] = el.value;
this.dispatchEvent(new CustomEvent("objchange", {
detail: JSON.stringify(this.obj_)
}));
}
}
Вызывается так
@track
testObj = {
title: "XXXXX",
details: "ZZZZZ"
}
testObjMeta = [
{type: 'text', label: 'Title', name: 'title'},
{type: 'textarea', label: 'Details', name: 'details'},
]
objChangeHandler(ev) {
this.testObj = JSON.parse(ev.detail);;
}
<c-super-form obj={testObj}
meta={testObjMeta}
onobjchange={objChangeHandler} ></c-super-form>
Работает вроде, и даже на two-way binding похоже