[Investigation] Improve Reactive Forms Experience

[MikeRyanDev]

A number of developers have asked if the ngrx organization would be willing to develop and maintain a reactive forms library for Angular.

Please use this ticket to report either A) usability issues with the existing reactive forms API found in @angular/forms, or B) present use cases that are not covered by @angular/forms.

Consider this step one in the design process of @ngrx/forms.

cc @DzmitryShylovich @brandonroberts @fxck @jhuntoo

[fxck]

Thanks for opening this. I'll get to it over the weekend. I have to refresh my memory for all the situations I encountered that I thought ngrx/forms would have helped with.

---

issues

• so the first and obvious problem are async validators / using debouce operators, it's a big pita currently (How to use observable operators like debounceTime and switchMap for asynchronous validations angular/angular#6895), it would be nice to have validators as a chain of operators
• another problem(rather in design, but solvable by ngrx/forms) is that it's impossible to trigger value change/validation on different event other than change.. like on blur(Angular2 Forms Controls validation "OnLostFocus (OnBlur)" rather than "OnChange"  angular/angular#7113 (comment))
• debouncing/throttling on value change is pain in the ass as well
• validators depending on conditions / values from different controls would probably be much easier
• submitted state is hard to access, as it's only accessible by exporting ngForm from the form element/directive, it's not accessible from FormControl, FormGroup
• to make this.form.valueChanges usable inside say, combineLatest, you have to use .startWith(''), otherwise it won't resolve.. this usecase is even worse

  currentText$ = this.post$
    .filter(res => !!res)
    .switchMap(post => this.postContentForm 
      .get('text').valueChanges // this is actually filled using data from `this.post$`!!
      .startWith(post.text)
      .distinctUntilChanged()
    );

• reactive forms do not have observable states(only values) like focused, touched, dirty
• there is no way to type FormGroup structure, so you can't be sure that form.get('whatever') FormControl whatever actually exists
• the whole idea of having to do this

this.someValue$.subscribe(value => this.someForm.patchValue(value))

to fill in data simply doesn't feel reactive enough and comes with its own problems, like that when it for example receives new data that for example websocket updated, while you are in middle of editing.. there are ways to deal with it, but by having the current values inside store, it would be much easier(I think?).

• when you want to save, you have to access forms' sync value, something like

onSave() {
  if (this.form.valid) {
    this._store.next({ type: 'SAVE', payload: this.form.value })
  }
}

it would be much easier if validity and value were inside the store, you'd simply trigger the action and handle the rest inside effect or something

questions I asked myself when thinking about how to implement ngrx/forms

• do we need similar concept to that of FormGroup / FormControl?
  • makes passing validators to elements easier
  • how to access the values?
    • via selector? using ngrx’s select() even? can we make it more straightforward to user wouldn’t need to to this._store.let(get$(‘some.key)) but just get$(‘some.key’) instead? if we add the "FormGroup / FormControl", could it be part of that
  • how to would updating work? provide action creators and let user use dispatcher or store/next, or again just use the FormGroup/Control class that would dispatch for you
• what all needs to be saved in the store?
  • value
  • valid
  • active
  • errors
• how to use angular’s value accessor for native elements?
  • we would need to set different selector, is it possible?
• should be keep the sync value somewhere? will probably use it anyway to compare local state vs. store state
• it should be possible to override default onChange of native elements and chose your own method, ie. blur instead of input, what would be the best way to do it?
• do we need ngrxFormName directives, or just [ngrxForm]
• how to handle nesting, for example when one element of group is invalid, set parent to invalid as well.. do it all inside reducer?

[MikeRyanDev]

@fxck I'm also doing a lot of form intensive development over the next month. Let's capture as many issues here in that time period and work on a design for potential solutions after that.

[fxck]

@MikeRyan52 added couple of things I remembered and couple of question I had written down from a couple of months ago

[abdulhaq-e]

Hello everyone.

@fxck That is a good list of issues to think about.

Since ngrx tools combines rxjs and redux, I reviewed the redux side of the upcoming @ngrx/forms by reading the docs of redux-form which seems to be popular in the React community (http://redux-form.com/). I then made a gist in which I attempted to write pseudo Angular code that imitates the way redux-form work. Of course, the core of redux-forms was left as "magic" because the code is heavily based on React. That core I believe is where Rxjs will come into play for @ngrx/forms.

Here is the gist: https://gist.github.com/abdulhaq-e/b0abc305c16f6c14b499ccfcd56459ed

[MarkPieszak]

@MikeRyan52 Excited about this idea as well! If there's anyway I can help chip in, let me know!

[bortexz]

Would love to see this!

[philjones88]

Adding interest was redirected here by an issue I added to store.

Happy to help if I can.

[adharris]

Complicated forms are the major pain point for my app, and it's most important feature (case management for schools, hundreds of fields across many forms, with complex conditional display and validation). While ngrx has been a boon for all other parts of my app, it hasn't helped much with my forms, which remain a highly stateful, custom, and untested mess.

I can best sum up my pain like this: It's difficult (and maybe silly) to put angular's reactive form state into the store, but I many times need to extend that state with additional data in order to render my view. I.e disable and hide this field when a second field has a specific value; change the options of the 'State/Province' field when 'Country' is changed...

I'd be very interested in helping create and using a solution that allows writing the rules to my forms be as simple and testable as ngrx makes selecting data for the view.

[fxck]

I think @MikeRyan52 is currently a bit busy with work, what would help is if you all who said would be interested in this project described your use cases or issues you have with @angular/forms(unless they are 1:1 with what someone else already wrote). The more the better.

[tashoecraft]

@fxck Your writeup had a lot of my pain points but I will try to add some more, with the main focus being the reactive forms section.

The default @angular/forms library essentially creates it's own state of the formGroup/array where the status and validity of your form lives. So if you want to put any of this into the store, you're working with statusChanges and valueChanges, submitting actions for each and reducing them. But the form will always be referencing it's own controllers, not the state. So the truth isn't in the store, but in the formGroup.

I haven't found a way to use 3rd party components built in angular (angular material, clarity, etc) because they aren't build with the idea of putting relevant information into the store. I've pretty much given up on full featured solutions and just implemented the individual ones I need, and using semantic to style. If a 3rd party component library was built off of ngrx/forms, with the ability for it to work for projects not using ngrx, then ngrx can get a big push with having the broader angular community working with it rather then creating incompatible packages (this idea is fully thought out, maybe I'll try to code something up this weekend).

Forms is definitely a struggle point when implementing ngrx for a form intensive app. I was planning on building something like a ngrx/forms, but work has taken too much of the time.

[fxck]

I haven't found a way to use 3rd party components built in angular (angular material, clarity, etc) because they aren't build with the idea of putting relevant information into the store.

Tell me about it, the concept of stateless components seem to be alien to almost everyone in the angular world. I'm trying to get ngrx/store friendly dialog component in material2 as we speak(angular/components#2853 (comment)). Dialog is one of the components where it makes the biggest sense, but it would be handy in other components as well, like the sidenav(https://github.com/angular/material2/tree/master/src/lib/sidenav) for example.

[JBusch]

Sounds great!

[born2net]

Thanks guys for raising the issue, I find myself doing a lot of busy work to connect and ngrx to the form and would love to assist in this new path...
I am wondering what is the current best practice until a full blown solution is adopted?
Is this what users are doing in the meanwhile ?

@Component({
  template: `<router-outlet [form]="form" [data]="data$ | async"></router-outlet>`
})
class SmartComponent {
  public data$ = this._store.let(someSelector$());

  public form = new FormGroup({
   foo: new FormControl(''),
   bar: new FormControl('')
  });

  constructor(private _store: Store<IState>) {}
}

@Component({
  template: `
    <form [formGroup]="form">
      <input type="text" formControlName="foo" />
      <input type="text" formControlName="bar" />
    </form>
  `
})
class DumbComponent {
  @Input()
  public form: FormGroup;

  @Input()
  set data(v) {
    if (v) {
      this.form.patchValue(v);
    }
  };
}

Regards,

Sean