FORMULAR DEV

// React adapter with FormularForm and hooks
import { useService } from '@adapters/react/services/use-service'
import { useField } from '@adapters/react/fields/hooks/use-field'
import FormularForm from '@components/formular-form/formular-form'
import InputText from '@components/input-text/input-text'
import { SFormularManager } from 'formular.dev.lib'

function UserRegistrationForm() {
    const { getService } = useService()
    const formularManager = getService(SFormularManager)

    // Create form from descriptors
    const formular = formularManager?.createFromDescriptors(
        'user-registration', 
        [emailField, phoneField]
    )

    const handleSubmit = (data) => {
        console.log('Form submitted:', data)
    }

    return (
        <FormularForm formular={formular} onSubmit={handleSubmit}>
            <InputText fieldName="email" />
            <InputText fieldName="phone" />
            <button type="submit">Submit</button>
        </FormularForm>
    )
}

// Vue composables with reactivity
<template>
  <FormularForm 
    :formular="formular" 
    @submit="handleSubmit"
  >
    <InputText field-name="email" />
    <InputText field-name="phone" />
    <button type="submit" :disabled="!formular?.isValid">
      Submit
    </button>
  </FormularForm>
</template>

<script setup>
import { useFormularManager } from 'formular.dev.vue'

const { createFromDescriptors } = useFormularManager()

const formular = createFromDescriptors(
  'user-registration', 
  [emailField, phoneField]
)

const handleSubmit = (data) => {
  console.log('Form submitted:', data)
}
</script>

// Angular service integration
@Component({
  selector: 'app-user-form',
  template: `
    <formular-form 
      [formular]="formular" 
      (onSubmit)="handleSubmit($event)">
      <formular-input 
        fieldName="email">
      </formular-input>
      <formular-input 
        fieldName="phone">
      </formular-input>
      <button type="submit" [disabled]="!formular?.isValid">
        Submit
      </button>
    </formular-form>
  `
})
export class UserFormComponent {
  formular = this.formularService.createFromDescriptors(
    'user-registration', 
    [this.emailField, this.phoneField]
  )

  constructor(private formularService: FormularService) {}

  handleSubmit(data: any) {
    console.log('Form submitted:', data)
  }
}

// Pure JavaScript integration
import { FormularManager, DOMAdapter } from 'formular.dev.vanilla'

// Create form manager with service container
const formularManager = new FormularManager(serviceManager, notificationManager)

// Create form from descriptors
const formular = formularManager.createFromDescriptors(
    'user-registration', 
    [emailField, phoneField]
)

// Bind to existing HTML form
const domAdapter = new DOMAdapter(formular)
domAdapter.bindToForm('#user-registration-form')

// Listen to form events
formular.notificationManager.subscribe('validation', (field, isValid, errors) => {
    const errorDiv = document.querySelector(`#${field.name}-errors`)
    errorDiv.innerHTML = errors.map(err => `<span>${err.message}</span>`).join('')
})

formular.notificationManager.subscribe('submit', (data) => {
    console.log('Form submitted:', data)
})