ui/src/form/Form.component.ts

import {ExComponent} from '../ExComponent.js'
import {Attribute, Component} from '../decorators.js'
import {FormControl, FormField, FormData} from './types.js'

@Component('ex-form')
export class FormComponent extends ExComponent implements FormControl {
    protected static html = `
        <style>
            slot {
                display: flex;
                flex-direction: column;
            }
        </style>

        <div class="container">
            <slot></slot>
        </div>
    `

    protected fields: FormField[] = []

    @Attribute()
    public name?: string

    hasField(field: FormField): boolean {
        return this.fields.some(maybe => maybe.getFieldName() === field.getFieldName())
    }

    registerField(field: FormField): void {
        this.fields.push(field)
    }

    gather(): FormData {
        const data: FormData = {}

        for ( const field of this.fields ) {
            data[field.getFieldName()] = field.getValue()
        }

        return data
    }

    processChanges(): void {
        for ( const field of this.fields ) {
            field.validate()
        }
    }

    isValid(): boolean {
        let valid = true

        for ( const field of this.fields ) {
            valid = field.validate() && valid
        }

        return valid
    }

    async submit(): Promise<void> {
        (3 + 4)
    }
}