Adding ngrx-forms implementation into platform

[tashoecraft]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request

What is the current behavior?

There is no ngrx-forms

Expected behavior:

Either bring in https://github.com/MrWolfZ/ngrx-forms into the platform, our build something that accomplishes the same goal.

Minimal reproduction of the problem with instructions:

Version of affected browser(s),operating system(s), npm, node and ngrx:

Other information:

Previous discussion: ngrx/core#12

[fxck]

Here's what I messaged to Brandon couple of weeks ago.

[fxck]

@brandonroberts @MikeRyanDev @robwormald @vsavkin

Any update would be really lovely. The last thing you could call an official, public, update on this was in January.

Even "we are currently not planing on doing this because n" or "we do not plan on doing this ourselves in foreseeable future and we do not trust people outside ngrx team enough to support any official library, so the best option is you try do it third party" would be really really great.

Don't take the angular approach of never addressing things.. please.

[robwormald]

@fxck I’m not sure the value add here over angular’s forms reactive forms implementation. In fact, I’m not even sure that ngrx should have anything to do with forms - which are almost always best treated as local component state.

It’s not clear what you’re proposing, why, or what the benefits and drawbacks are. What problems are you solving?

Present a coherent proposal, and we’ll discuss it. “Take over this other repo from a third party” does not constitute such a proposal.

[fxck]

@robwormald this issue ngrx/core#12 is full of reasons, whys and whats, and given its got almost 60 likes, I'd say I'm not the only one interested in ngrx forms (and honestly, almost 8k stars on redux forms speaks for itself as well)

which are almost always best treated as local component state.

I beg to differ, from my experience, if I had form state in store, my life would be million times easier, for example, being able to reset form state upon success action / effect is one of many use cases

Present a coherent proposal, and we’ll discuss it. “Take over this other repo from a third party” does not constitute such a proposal.

This I completely agree with, https://github.com/MrWolfZ/ngrx-forms is only a bridge between angular forms and ngrx and not the best one at that, what I suggest (read my message to Brandon) is completely standalone module.. and in fact, @MikeRyanDev was already working on a design doc, here are couple of snippets from it:

Async Validators

@Injectable()
class OnBlurNameUniqueValidator {
  constructor(
    private formValidator: FormValidator,
    private nameService: NameService
  ) { }
  
  @Effect() validate$ = this.formValidator
    .createAsyncValidator('isNameUnique')
    .mergeMap(({ formControl, createValidationAction }) =>
      formControl.blur$
        .withLatestFrom(formControl.value$, (_, name) => name)
        .switchMap(name =>
          this.nameService.isUnique(name)
            .map(isUnique => createValidationAction({
              valid: isUnique
            }))
            .catch(() => Observable.of(
              createValidationAction({ valid: false })
            ))
        )
    );
}

custom controls

interface FormControl<T> {
  disabled$: Observable<boolean>;
  value$: Observable<T>;
  
  acceptValueChanges(value$: Observable<T>): void;
  acceptTouchedChanges(value$: Observable<void>): void;
}

@Directive({
  selector: 'input',
  host: {
    '(input)': 'valueChanges.next($event.target.value)',
    '(blur)': 'touchedChanges.next()',
    '[disabled]': 'disabled',
    '[value]': 'value'
  }
})
export class InputFormControl {
  valueChanges = new Subject<string>();
  touchedChanges = new Subject<void>();
  disabled: boolean = false;
  value: string = '';

  constructor(control: FormControl<string>) {
    control.disabled$.subscribe(disabled => this.disabled = disabled);
    control.value$.subscribe(value => this.value = value);
    control.acceptValueChanges(this.valueChanges);
    control.acceptTouchedChanges(this.touchedChanges);
  }
}

creating forms

import { group, control } from '@ngrx/forms';

@Component({
  template: `
    <form ngrxForm="nameAndAge">
      <label>
        Name
        <input type="text" ngrxFormControl="name">
      </label>
      
      <label>
        Age
        <input type="number" ngrxFormControl="age">
      </label>
    </form>
  `
})
export class SomeFormComponent {
  form = group({
    name: control({
      disabled: false,
      asyncValidators: [ 'isNameUnique' ]
    }),
    age: control({
      disabled: false,
      validators: [ isOldEnough ],
    })
  });
}
 
function isOldEnough(age: number) {
  return {
    isOldEnough: {
      valid: age > 21
    }
  };
}

[tashoecraft]

@robwormald Wasn't really thinking that ngrx would pull in some random 3rd party library, more so to see if there were thoughts into building one and incorporating it into the platform as the conversation hasn't progressed in almost a year.

I'm sure how most people use forms it wouldn't be beneficial to incorporate it into the store, but when the forms get large and complicated, redux really seems to help. My app can have 50+ fields that can change at any point depending on seed data (so dynamic forms), with some complex validations that modify the form in many ways (fields hiding and showing, required if x field has value y). I've gotten around the limitations, but I feel that a central store for all the form data would make it all more robust and easier to work with.

I know a huge amount of work has gone into angular/forms, and it would be a massive undertaking to try and replicate a similar feature set. I've looked into extending the existing forms library to try and incorporate into ngrx, but the time to do it hasn't really been available. I'm mostly curious to see what the community thinks as a solution, and if that means a new module in the platform, a 3rd party library, or merely docs on how to go about it with the current setup then I'm all helping out (as I'm sure many others are as well).

[fxck]

So is this back in discussion?

[fxck]

Another place where ngrx/forms would be useful are guards, when you want to use canDeactivate depending on some form state.

[kosz]

One of the core principles of Redux is single source of truth, and without such a connector, the source of truth becomes duplicated in an Angular specific class instance that lives inside a component and now encapsulates state information that the central store can't see without specific implementation work from the developers.

What if I want an indicator in my navbar of how many forms are currently invalid ?

Theory indicates that I would have to use a selector and look through multiple slices. But also redux theory indicates that there should be a single source of truth.

So if the actual answer is : update a slice manually depending on a source of truth that's outside of the centralized store, are we still following the 3 principles from Redux or is the ngrx implementation not supposed to follow these ?

I also think that if we use ngrx store & effects to load the form data from the server, which makes sense, again, we're dealing with two sources of truth without such a connector, where the data we received from the server is in the store, but the latest version lives inside the angular reactive form.

[fxck]

but the latest version lives inside the angular reactive form.

Yeah, that's a classic.

  currentText$ = this.post$
    .filter((post) => !!post)
    .take(1)
    .switchMap(
      (post) => this.contentForm.instance
        .get('text')
        .valueChanges
        .startWith(post.text)
    );

[fxck]

Another problem is, that you don't always have access to the form instance, I usually try to put the form instance into the "smart" component and pass it down to the dumb components, but there are cases where you want to show current data in a component but the form instance is in different component tree branch altogether and if this happens to be a component that is a route, you can't even put the form instance to the common component tree parent node and pass it down with inputs. So you end up saving the form instance into a service.. and basically replicating store. It sucks.

[fxck]

Also optimistic updates. You send request, add data to store, reset form.. it fails, what now? Again, you need to save form state before the request happens somewhere, inject effects to get to the fail stream (to restore data), or success stream (to reset form). Words can't describe how a proper forms integration would help me in daily work.

[Kaffiend]

Words can't describe how a proper forms integration would help me in daily work.

I couldn't agree more. More concise, granular control over complex forms via a proper integration would be a godsend.