[Request] More manageable Form at scale

[Solido]

I'm going with MobX on my new project which involves a lot of Forms (hundreds) and Fields (10 to 50)

At core MobX solve a lot of concerns but it's not easy to copy the Form example at scale when you have a lot of fields.

There are two stores to handle, values and errors also you should not forget to init disposers.

There's an ObservableList that handle specific modifications and react accordingly.
I'd like to have an ObservableFormField that would handle Fields.

So much handwritten code is really error prone when working on real business forms entries

Thank you for your feedback !

I'm not sure how to architect all this but I'll be happy to find logic per field at one place only.

@observable
ObservableFormField<String> name = ObservableFormField<String>(
   name:'firstname',
   validator : ...
   error : errorBuilder<String>(..) => ...
)

@action
setName(String value) => name.value = value

[pavanpodila]

Hi Robert, you have raised a very valid concern and I am totally with you on the complexity of managing this. Your suggestion of ObservableFormField seems like a good approach. I think we should make a package called mobx_forms and have this be part of that?

The sample API could look like so. Note that the validation itself is outside of the scope of mobx_forms

import 'package:mobx/mobx.dart';

part 'observable_form_field.g.dart';

class ObservableFormField<T> = _ObservableFormField<T> with _$ObservableFormField;

class _ObservableFormField<T> with Store {

  _ObservableFormField({this.name, this.label, this.value});

  final String name;

  final String title;

  // Most important error
  @computed
  String get error => errors == null ? null : errors[0];

  // All errors, if more than one
  @observable
  List<String> errors;

  @observable
  T value;


  @computed
  bool get isValid => errors == null;
}

This is just a start and we can iterate together to create this package ?

[Solido]

Hi Pavan,

A full featured but complementary mobx_forms that rely partly on validation lib should have a lot of success ! I can already see how to leverage the capacities of MobX to make complexe business rules more transparent.

I'll provide you with all the support I can to setup this package !

[pavanpodila]

Awesome. Why don't we start with the use cases you are tackling ? Should I make a branch on this repo for mobx_forms and invite you for collaboration ?

[Solido]

Currently I'm working on a POC and creating the use cases for the developers to rely on.

Goals is to cover basic types fields, errors management, local & remote validations, sub-forms reactions, etc

This could be used as the main example for flutter_mobx_form

I'll join you on this new exciting branch.

[pavanpodila]

Nice. Let me make and invite you

[pavanpodila]

We might have to include some Observer components too, so I think I should call this flutter_mobx_forms ? It will have the MobX stores + Observer widgets

[Solido]

flutter_mobx_forms is the perfectly searchable pub name

[rrousselGit]

error should probably be computed instead:

abstract class StringField with Store {
  StringField(this._validator);

  final String Function(String value) _validator;

  @observable
  String value;

  @computed
  String get error => _validator?.call(value);

  @computed
  bool get isValid => error == null;
}

Which allows:

StringFIeld((value) {
  if (value.isEmpty) return "Missing field but required";
  return null;
});

[pavanpodila]

Agree @rrousselGit. I was also thinking there could be multiple errors for some fields

[pavanpodila]

We will have to decide if we take a hard dependency on validator or make it a callback function that we invoke. That way we can plugin any custom validation logic

[rrousselGit]

Indeed but validator could return an iterable instead:

StringField((value) sync* {
  if (value.isEmpty) yield "Missing field but required";
});

assuming we change the StringField error to:

  @computed
  List<String> get error => _validator?.call(value)?.toList() ?? const [];