I'm currently diving into the world of Angular and ngrx while tackling a project focused on enabling users to create forms. In this project, users can add various form elements (such as labels, text fields, dropdown menus, checkboxes, etc.) from a sidebar. Each generated form element is accompanied by two buttons - one for deleting and another for options. My task now involves integrating a slide-toggle/checkbox alongside these buttons, as depicted in the image below:
======================================================
component.html
<!-- Sidebar for adding form elements -->
<div id="add-element-div">
<button mat-icon-button matTooltip="Label"
(click)="store.dispatch(createAction.editorAddLabel(currentPageNumber))">
<mat-icon class="color">label</mat-icon>
</button>
.....
</div>
<!-- Option buttons for every element -->
<div class="ElementOptionButtons">
<button mat-icon-button
(click)="store.dispatch(this.createAction.editorRemoveElement(currentPageNumber,
currentForm.pages[currentPageNumber].pageElements.indexOf(FormularElement)))"
matTooltip="Delete">
<i class="material-icons">delete</i>
</button>
....
<!-- Toggle-slider/checkbox -->
<mat-slide-toggle
*ngIf="FormularElement.type!=='label'"
(change)="store.dispatch(createAction.editorAddAsRequired(currentPageNumber,
currentForm.pages[currentPageNumber].pageElements.indexOf(FormularElement)))"
matTooltip="Pflichtfeld">
<p>{{i}}</p>
</mat-slide-toggle>
</div>
reducer.ts
case fromEditorForm.EDITOR_ADD_AS_REQUIRED: {
const changedState = JSON.parse(JSON.stringify(state));
console.log('Reducer: mark as required');
console.log(" element: " + action.elementIndex + " pageNumbeR: " + action.pageNumber );
//changedState.form.pages[action.pageNumber].pageElements[action.elementIndex].required=true;
return changedState;
}
return changedState;
component.ts
export class EditorComponent implements OnInit {
public chosenBusinessType;
public currentForm: Form;
public currentPage: FormularPage;
public currentPageElements: FormElement[];
public currentPageNumber;
public loadedForms: Form[];
public createAction = new ActionFactory();
constructor(private store: Store<fromStore.GeneratorState>,
private formsService: FormsService,
private route: ActivatedRoute) {
this.store.select(fromStore.getLoadedForms).subscribe((forms) => {
this.loadedForms = forms.entities;
});
}
ngOnInit() {
this.currentPageNumber = 0;
this.route.params.subscribe(params => {
if (params.id === 'newForm') {
console.log('EDITOR: Aufgerufen zum Erstellen eines neuen Formulars');
this.currentForm = new Form();
} else {
console.log('EDITOR: Aufgerufen zum Bearbeiten eines existierenden Formulars');
for (const form of this.loadedForms) {
if (form.id === params.id) {
this.currentForm = form;
}
}
}
this.store.dispatch(this.createAction.editorChangeForm(this.currentForm));
this.store.select(fromStore.getFormInEditor).subscribe((object) => {
this.currentForm = object.form;
this.chosenBusinessType = this.currentForm.businessType;
});
});
}
======================================================
My Objective
The goal is to have each element marked as required when the corresponding slide-toggle/checkbox is checked. I am aiming to implement a single method that handles all sliders on the (change) event.
The Issue at Hand
Upon trying to toggle the slider switches, I noticed that either all sliders switch to true or nothing happens (depending on my approach). Introducing a (change) function in the HTML causes the issue of affecting all sliders or none. When omitted, the targeted slider toggles correctly, but not others.
Attempts Made So Far
To ensure uniqueness, an index was added to each slider (as observed in the picture above). Clicking on the sliders logs the correct form element, yet the sliders fail to be toggled upon interaction.
In seeking solutions, I explored similar questions on Stack Overflow and Google. One question that came close to mine involved toggling sliders using different methods, unlike my scenario with ngrx where the problem seems related to two-way binding.
Next Steps
I am considering creating a function in reducer.ts that adds a new FormElement following the addition of an element to FormElement in component.ts. However, I remain uncertain about whether this aligns with best practices.
=======
Being relatively new to Angular and ngrx, I am open to any essential basics that may have been overlooked. Should more code or details be needed, feel free to request updates for the post.