В моем приложении мне нужно создать реактивную форму, которая будет содержать флажки, которые будут создаваться динамически с возвратом 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 пользователей, которые были выбраны в профессиональном массиве, а затем, когда он должен отображаться на экране, мне нужно показать пользователей, которые доступны для выбора, и отметить, какие пользователи были выбраны.
Проблема кода выше заключается в том, что когда я загружаю данные в форму и меняю флажки, я вижу, что флажки не меняют значение моей формы и не вводят идентификаторпользователь, который выбран.