clbond / ng2-redux-form

Connect Angular 2 forms to Redux stores
17 stars 7 forks source link

Does this work with ngrx? #13

Open dancancro opened 8 years ago

dancancro commented 8 years ago

I'm working on this project and implementing the contact detail page of the Angular Tour of Heroes example in an ngrx app using ng2-redux-form.

NGRX takes the approach of modeling each collection of entities with two properties: a hash of objects and an array of their IDs, like so:

export interface State {
  ids: string[];
  entities: { [id: string]: Book };
  selectedBookId: string | null;
};

Selectors are defined in /store/index.ts like this:


export function getContactsState(state$: Observable<RootState>) {
  return state$.select(state => state.contacts);
}
export const getContactEntities = compose(fromContacts.getContactEntities, getContactsState);
export const getContactIds = compose(fromContacts.getContactIds, getContactsState);
export const getContacts = function (state$: Observable<RootState>) {
  return combineLatest<{ [id: string]: Contact }, string[]>(
    state$.let(getContactEntities),
    state$.let(getContactIds)
  )
  .map(([ entities, ids ]) => ids.map(id => entities[id]));
};

This is what I have at the moment but it doesn't work:

<h2>Contacts of {{(user$ | async).fullName()}}</h2>
<div *ngIf="(msg$ | async)" class="msg">{{(msg$ | async)}}</div>

<form *ngIf="(contact$ | async)" (ngSubmit)="onSubmit()" #contactForm="ngForm" connect="contacts$">
    <template connectArray let-index connectArrayOf="entities">
        <div [ngModelGroup]="index">
            <h3 highlight>{{ name | awesome }}</h3>
            <div class="form-group">
                <label for="name">Name</label>
                <input ngControl ngModel type="text" class="form-control" required name="name" #nameElement="ngModel">
                <div [hidden]="nameElement.valid" class="alert alert-danger">
                    Name is required
                </div>
            </div>
            <br>
            <button type="submit" class="btn btn-default" [disabled]="!contactForm.form.valid">Save</button>
            <button type="button" class="btn" (click)="nextContact()" [disabled]="!contactForm.form.valid">Next Contact</button>
            <button type="button" class="btn" (click)="newContact()">New Contact</button>
        </div>
    </template>
</form>
clbond commented 8 years ago

This library doesn't work with ngrx, only Redux. But it's not a bad idea to try to make it work with ngrx. I will add this to my todo list. Thank you!