Závislé komponenty – lze jednokrokově měnit strukturu formuláře podle hodnoty?

Čus vespolek, mám problém.

Problém

Snažím se vymyslet formulář, kterej se bude přiohýbat vybraným hodnotám ostatních prvků. Potřeboval bych něco ve smyslu závislých selectboxů, na který jsem tu našel pár témat ale z žádnýho jsem nevykoukal, co potřebuju. Chtěl bych být o krok generičtější, tj například:

// pokud $container['verdict']->value === 'accept', potom
$container['additional'] = Container([
  'commendation' => TextInput()
]);

// pokud $container['verdict']->value === 'postpone', potom
$container['additional'] = Container([
  'postponeDays' => NumberInput()->required(),
  'explanation' => TextArea(),
])

a případně další varianty. Zbytek funkcionality je REST-friendly ale nechce se mi ještě pouštět do klientský aplikace a chtěl bych mít chytrej formulář. Povedlo se mi formulář překreslit v rámci signálu ale neporadím si s odesíláním.

Řešil jste někdo takhle dynamickej formulář? Případně působí to na vás jako řešitelný problém pomocí Nette formulářů v rámci rozumnýho úsilí? Čím víc si s tím hraju, tím víc se chystám zkusit malou client-side appku.

Problém -v

Zatím jsem zkoušel:

• v handle jen říct, na jaký typ chci měnit a překreslit formulář kvůli tomu jsem ztratil zbytek hodnot (předvyplní se uložený hodnoty)
• v handle jen překreslit konkrétní inputy pro additional ale bylo to strašně moc kódu a pak jsem narazil na problém s odesíláním, (loadHttpData pracuje s formulářem v původní podobě)
• v handle přijímám všechny hodnoty, nastavuju přes setValues a překresluju celý formulář (stejný problém jako posledně ale za mnohem míň kódu)

Proteď si od toho dávám oraz a prosím vás o kritiku a nápady (Jsem připravený i na „Vykašli se na to a luskni tam Angular“ :D)

class ResolutionContainer extends Nette\Forms\Container {

    private $verdictAdditionalDataControlFactory;

    public function __construct(VerdictAdditionalDataControlFactory $verdictAdditionalDataControlFactory) {
        $this->verdictAdditionalDataControlFactory = $verdictAdditionalDataControlFactory;

        $possibleVerdicts = $verdictAdditionalDataControlFactory->getPossibleVerdicts();
        reset($possibleVerdicts);
        $defaultVerdict = key($possibleVerdicts);
        $this['verdict'] = (new SelectBox())
            ->setItems($verdictAdditionalDataControlFactory->getPossibleVerdicts())
            ->setDefault($defaultVerdict);

        $this['additional'] = $this->verdictAdditionalDataControlFactory->create($defaultVerdict);
    }

    public function setValues($data, bool $erase = false)
    {
        $currentVerdict = $this['verdict']->getValue();
        $verdict = $data['verdict'] ?? $currentVerdict;

        if ($currentVerdict !== $verdict) {
            unset($this['additional']);
            $this['additional'] = $this->verdictAdditionalDataControlFactory->create($verdict);
        }
        if (!isset($data['additional'])) {
            $data['additional'] = [];
        }
    }
}

A ve formuláři, kde to používám mám handle, kterej přijme JavaScriptem vyzobaný hodnoty:

let formData = new FormData(form);
let values = {};
for ([name, value] of formData.entries()) {
    let dotName = convertHttpNameToDots(name);
    _.set(values, dotName, value);
}
return values;

který pošle POSTem přes signál do setValues(). V tom signálu potom jen překreslím formulář a vrátím ho jako TextResponse, kde to překreslený formulář.

Uvědomuju si, že to je špatný na hned několika úrovních:

• hlavně to obchází loadHttpData :(,
• používá to interní setValues
• v podstatě to dělá to, co snippety
• (bludišťáka těm, kdo najdou další přešlapy :D)

Problém s odesíláním je, že ve formuláři mám defaultní variantu pro ‚additionals‘, kterou vyrobím s kontejnerem, a ta si při odeslání formuláře jen načítá hodnoty… což dává smysl, ale snažím se dokousat k něčemu jako je contributte/forms-multiplier.