Open dancancro opened 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>
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!
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:
Selectors are defined in /store/index.ts like this:
This is what I have at the moment but it doesn't work: