Формы - notForm

класс интегратор связывает UI, приложение и валидацию

notForm

как создать

new notBulma.Frame.notForm({
  name: string = 'Default',       //название формы
  options: object = {             //опции компонента
    model: string = undefined,    //название модели данных
    manifest: object = undefined, //манифест модели
    action: string,               //название метода интерфейса/модели
    autoInit: boolean = true,     //инициализировать ресурсы для формы при создании класса
    autoRender: boolean = true,   //отрисовать форму при создании класса
    variants: object = undefined, //библиотека вариантов для списков выбора. variants[field.variantsSource] = [{id:string|number, title: string}]
    target: string = '.form',     //селектор для поиска элемента в который нужно вставить форму
    validators: object = {},      //библиотека валидаторов
    ui: object = {},              //опции UIForm
    fields: array[string] = [],   //построчная схема полей формы
  },
  working: object = {},          //рабочее состояние класса, наследие notBase 
  data: object = {},             //данные для инициализации
  ui: SvelteComponent = UIFormComponent,  // UI для формы, совместимый по интерфейсу с UIForm
});

Основным способом работы с этим классом является создание специализированных классов форм на его основе. Но он может быть использован и напрямую.

Методы

что можно вызывать

initForm(): void: инициализирует форму, её ресурсы и отрисовывает с учетом опций autoInit, autoRender
initLibs(): void: инициализирует ресурсы: поля, варианты, валидаторы
reInit(): void: заново инициализирует ресурсы, обновляет UI, устанавливает статус loading = false
initFields(): void: инициализирует библиотеку полей из манифеста, получаемого getFormManifest
initVariants(): void: инициализирует библиотеку вариантов из опций
initValidator(): void: инициализирует валидатор для формы, использует getFormValidators для получения библиотеки валидаторов
initUI(): void: инициализирует UI, устанавливает обработчики событий
updateUI(): void: обновляет UI props
validateForm(): Promise undefined: валидирует данные формы, передаёт результат в updateFormValidationStatus
submit(data: object): void: вызывет событие submit с указанными данными
reject(): void: вызывет событие reject
setLoading(): void: вызывет событие loading, устанавливает состояние UI loading = true
resetLoading(): void: вызывет событие loaded, устанавливает состояние UI loading = false
destroy(): void: вызывет событие destroy, удаляет ссылки на различные ресурсы
getName(): string: возвращает название формы, ${options.name}Form
getFormAction(): string: возвращает название метода манифеста/модели
processResult(result: object): boolean: обрабатывает ответ от сервера, если result.status === 'ok', то вызывает setFormSuccess, возвращает true, если result.status !== 'ok', то вызывает setFormErrors, возвращает false.
setFormSuccess(): void: устанавливает UI в состояние успешного завершения работы с формой, генерирует событие success
setFormErrors(): void: обновляет UI в соотвествии с результатами проверки формы/отчета об ошибках, генерирует событие error
getVariant(name:string, id: string|number): object | null: возвращает элемент из словаря вариантов
getFormTargetEl(): HTMLElement: возвращает элемент страницы для вставки в него формы. Возможно переопределение в потомках.
getFormValidators(): object: возвращает библиотеку валидаторов, подробнее в not-validation. Возможно переопределение в потомках.
getFormManifest(): object: возвращает манифест интерфейса (UI и сетевого для обращения к серверу). Возможно переопределение в потомках.
getFormData(): object: возвращает исходные данные формы или сохранённые после вызова collectData, атомарные изменения не отражаются. Возможно переопределение в потомках.
getFormOptions(): {ui: object, fields: array[string]}: опции UI формы. Возможно переопределение в потомках.
collectData(): object: собирает данные из UI. Возможно переопределение в потомках.

События

что можно слушать

change: {detail: {field: string, value: any}} - изменение значения поля
submit: data: object - нажатие кнопки отправить, передаются данные формы
reject: нажатие кнопки отмена, ничего не передаётся в параметрах
loading: статус формы изменился на ожидание данных
loaded: статус формы изменился на активный
success: форма успешно заполнена
error: status: object = {form:Array[string], fields: {[fieldname:string]:Array[string]}} - в форме есть ошибки
destroy: форма уничтожается

Пример валидатора модели

общий вариант

//examples/src/js/forms/simple.validators.js

const wait = tm => new Promise(res => setTimeout(res, tm));

export default {
  fields:{
    nameFirst: [
      {
      //sync or async variants possible
      validator: (fieldValue, validationEnvironment = {})=>{
        return fieldValue.length > 2;
      },
      //error message. plain text or LOCALE string name
      message: 'nameFirst should be atleast 2 letters long'
    }],
    nameLast: [{
      validator: (fieldValue, validationEnvironment = {})=>{
        return fieldValue.length > 1;
      },
      message: 'nameLast should be atleast 2 letters long'
    }],
    email: [{
      validator: (fieldValue, validationEnvironment = {})=>{
        return fieldValue.indexOf('@mail.ru') > -1;
      },
      message: 'email should be in @mail.ru'
    }],
    telephone: [{
      validator: (fieldValue, validationEnvironment = {})=>{
        return fieldValue.length>10;
      },
      message: 'wrong telephone'
    }],
    country:[{
      validator: (fieldValue, validationEnvironment = {})=>{
        return ["1", "2", "3", "4"].includes(fieldValue.toString());
      },
      message: '__country_code_error__'
    }],
    login:[{
      validator: (fieldValue, validationEnvironment = {})=>{
        return !["root", "admin"].includes(fieldValue.toString());
      },
      message: '__wrong_user__'
    },{
      validator: (fieldValue, validationEnvironment = {})=>{
        return fieldValue.length>3;
      },
      message: '4 letters minimum'
    }],
    password:[{
      validator: (fieldValue, validationEnvironment = {})=>{
        return fieldValue.length > 3;
      },
      message: '4 chars minimum'
    }]
  },
  //forms: Object for multiple forms validators
  forms:{
    //form action name
    create: [
      //sync or async variants possible
      async (formData, validationEnvironment = {})=>{
        await wait(1000); //simulate async request to server for example
        if(formData.nameFirst === formData.nameLast && formData.nameLast && formData.nameLast.length > 3){
          //to add errors to validation session result you need
          //to throw notValidationError compatible error
          throw new notError.notValidationError('form error', {
            form: ['fields are equal'],
            fields: {
              nameFirst: ['Could not be equal to nameLast'],
              nameLast: ['Could not be equal to nameFirst'],
            }
          });
        }
      },
    ],
    login: [
      async (formData, validationEnvironment = {})=>{
        await wait(1000); //simulate async request to server for example
      },
    ],
    delete:[],
    update:[],
    //and so on
  },
  //or if you need only one form validation
  //form: Array for single form only
  /* like this
  form:[
    async (formData, validationEnvironment = {})=>{
      await wait(1000); //simulate async request to server for example
      if(formData.nameFirst === formData.nameLast){
        throw new notError.notValidationError('form error', {
          form: ['fields are equal'],
          fields: {
            nameFirst: ['Could not be equal to nameLast'],
            nameLast: ['Could not be equal to nameFirst'],
          }
        });
      }
    },
  ]
  */
};