Реактивная форма и динамические флажки с наблюдаемыми - PullRequest
0 голосов
/ 24 сентября 2018

В моем приложении мне нужно создать реактивную форму, которая будет содержать флажки, которые будут создаваться динамически с возвратом Observable .

Этими чекбоксами будут пользователи, которых я зарегистрировалв системе банк должен хранить выбранный идентификатор пользователя, а при отображении формы на экране должны отображаться выбранные пользователи.

Я использую Cloud Firestore для сохранения данныхЯ извлекаю данные из базы данных и сохраняю их в состоянии моего приложения, используя Ngrx .

. В любое время у меня может быть больше пользователей, поэтому я должен добавлять и удалять чекбоксы из своего приложения.реактивная форма.У меня есть код, но он не соответствует тому, что мне нужно, мне нужна действительно функциональная логика, потому что у меня возникают проблемы при создании алгоритма, который отвечает моим потребностям.

user.selector.ts

export const getProfessionals = createSelector(
    getEntities,
    (entities): any => {
        return Object.keys(entities).
            map(id => entities[id]).
            filter(data => data.type_user === 'p');
    }
);

export const getUserSelected = createSelector(
    getEntities,
    fromRoot.getRouterState,
    (entities, router): any => {

        let selecteds = [];
        const userSelected = entities[router.state.params.id];

        if (userSelected && userSelected.type_user === 'r') {
            const professionals = Object.keys(entities)
                .map(id => entities[id])
                .filter(data => data.type_user === 'p');

            selecteds = professionals
                .map(v => userSelected.professionals.includes(v.id));
        }

        return {...userSelected, professionals: selecteds};
    }
);

component.ts:

user$ = this._store.select(userSelectors.getUserSelected);
professionals$ = this._store.select(userSelectors.getProfessionals);
professionalsDisplay: any[];

createForm(): void {
    this.myForm = this._formBuilder.group({
        id: new FormControl(''),
        avatar: new FormControl(''),
        type_user: new FormControl('r', Validators.required),
        subscriber: new FormControl(false),
        name: new FormControl('', Validators.required),
        email: new FormControl('', [Validators.required, Validators.email]),
        administrator: new FormControl(false),
        genre: new FormControl('', Validators.required),
        professionals: this._formBuilder.array([]),
        password: new FormControl(''),
        passwordConfirm: new FormControl(''),
    });

    this.user$
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe((user) => {
            if (user) {
                this.myForm.patchValue(user, { emitEvent: false });
                user.professionals.forEach(value => this.usersForm.push(new FormControl(value)));
            }
        });

    this.professionals$
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe((professionals) => {
            this.professionalsDisplay = professionals;
            const values = professionals.map(v => new FormControl(false));
            this.myForm.addControl('professionals', this._formBuilder.array(values));
        });
}

get usersForm(): AbstractControl[] {
    return (<FormArray>this.myForm.get('professionals')).controls;
}

component.html:

<div class="h3 blue-fg">
     Which professionals do you attend?
</div>

<div fxLayout="column" fxLayout.xs="column" fxLayoutAlign="start start">
    <div formArrayName="professionals" *ngFor="let userForm of usersForm; let i = index">
    <mat-checkbox fxFlex="100" [formControlName]="i">{{ 
     professionalsDisplay[i]?.name }}</mat-checkbox>
    </div>
</div>

IМне нужно сохранить в базе данных ID пользователей, которые были выбраны в профессиональном массиве, а затем, когда он должен отображаться на экране, мне нужно показать пользователей, которые доступны для выбора, и отметить, какие пользователи были выбраны.

Проблема кода выше заключается в том, что когда я загружаю данные в форму и меняю флажки, я вижу, что флажки не меняют значение моей формы и не вводят идентификаторпользователь, который выбран.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...