Exploring the process of setting up reactive forms with AngularJS to handle arrays

I am working on setting up a reactive form for AngularJS and need to initialize certain fields:

initializeBusinessEposForm(): void {
    this.businessEposForm = this.formBuilder.group({
      custom_pos_priority: new FormControl(false),
      custom_float_menu: new FormControl(false),
      epos_quick_code_print: new FormControl(false),
      permission: this.formBuilder.group({
        isEposCustomerData: new FormControl(false),
        stripe_terminal_processor: new FormControl(''),
        tips: [],
      }),
    });
  }

The tips field is an array with the following values:

[
    {
        "name": "gratuity_tip",
        "isActive": false,
        "orderType": []
    },
    {
        "name": "terminal_tip",
        "isActive": true,
        "orderType": [
            1,
            4
        ]
    }
]

Now, I am trying to figure out how to add these arrays to tips: [] as an array.

javascriptangularjsformsangular-reactive-formsformbuilder

Answer №1

Ever experimented with utilizing the FormArray feature?

initializeBusinessEposForm(): void {
    this.businessEposForm = this.formBuilder.group({
      custom_pos_priority: false,
      custom_float_menu: false,
      epos_quick_code_print: false,
      permission: this.formBuilder.group({
        isEposCustomerData: false,
        stripe_terminal_processor: '',
        tips: this.formbuilder.array(tips.map(tip => initTipFormGroup(tip)),
      }),
    });
  }

initTipFormGroup(tip: Tip): FormGroup {
  return this.formbuilder.group({
    name: tip.name,
    isActive: tip.isActive,
    orderType: tip.orderType,
  });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Consolidate multiple generic items into a single entry

In my current project, I am structuring the types for a complex javascript module. One of the requirements is to handle multiple types using generics, as shown in the snippet below: export interface ModelState< FetchListPayload, FetchListR ...

javascripttypescript

Tips for dynamically passing column fields in ng-grid with AngularJS

Currently, I am utilizing the ng-grid module of AngularJS in my directive. Here is the snippet of code from my directive: $scope.gridOptions = { data : 'sample', columnDefs : [ { field : "usern ...

angularjs

Using the result of one function in another function when using async await

I am facing an issue with running a function based on the return value of another function: // in utils.js methods:{ funcOne(){ // do some thing return true } } //in component.vue methods:{ funcTwo(){ let x = this.funcOne() if(x){ ...

javascriptvue.jsvuejs2nuxt.js

What is the method for specifying a .php page as the html source when using Ext.Panel?

I have a current situation where I manually set the html for an existing panel using a variable in the following way: var htmlContent = '<H1>My Html Page'; htmlContent += '[more html content]]'; var newPanel = new Ext.Panel({ ...

phpjavascriptextjs

Error: The 'encoding' property cannot be set on null objects in THREE.js

I have been trying to load a basic grass block from Minecraft, but I keep encountering an error message that says TypeError: Cannot set properties of null (setting 'encoding'). This error originates from line 2893 in GLTFLoader, specifically the ...

javascriptthree.js

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Here is the code I am working with: var g = document.getElementById("al").value; function start() { document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g); } <p id="test2">Output will be displayed here:</p> <form> ...

javascripthtmlcss

Preventing child element clicks in Angular 5: A helpful guide

I have checked numerous references, but unfortunately haven't received any responses. That's why I have turned to this platform in hopes of improving my code with your assistance. I need to add an element with text on click. Currently, it works ...

javascriptangular

How can I use JavaScript api calls to retrieve an image url and insert it into an image tag in an

I have a JSON object that I need to use to retrieve images from a remote URL and display them in the img tag using API calls. The API link can be found at <div class="emoji"> <ul id="emojiz"></ul> <span style= ...

javascriptajaxhtmlapi

Tips for troubleshooting when document.queryselector isn't functioning properly in NextJS for server-side rendering (SSR)

I encountered an issue with my circular progress bar code on a Next.js page. Whenever I try to update the "progressEndValue" variable to 67, it triggers a page refresh but doesn't reflect the new value on the progress bar. Instead, I receive the follo ...

javascriptreactjsnext.js

Error message: 'firebase/app' does not export 'app' (imported as 'firebase') - Import attempt failed

Encountered a strange issue today. As I tried to import firebase, an error popped up: ./node_modules/firebaseui/dist/esm.js Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase'). The setup ...

javascriptfirebasenpmfirebaseui

Detach an item from its parent once it has been added to an array

Currently, I am facing an issue with a form on my blog. The blog is represented as an object that contains multiple content objects within it. I seem to be experiencing some confusion because the reactivity of the content I add to the Array persists with t ...

javascriptarraysvue.jsvuejs3

What is the method to restrict the selection of only one option for specific values in a multiple-selection dropdown menu?

Is there a way to create a dropdown menu with the following functionalities: I want to allow multiple selections for options A, B, and C, but disable multiple selection if option D is selected. Any tips on how to achieve this? Thank you. <label>Ch ...

javascripthtml

Issues related to ng-model within a dropdown list

Currently, I am facing an issue with retrieving the selected value from a select element using ng-model. Even though the value is displayed correctly on the application page, it remains at the initial value in the app controller. Despite my efforts to find ...

javascriptangularjs

Real-time data and dynamic checkbox functionality in AngularJS

I am working on an onclick function that involves data stored in objects. $scope.messages = [ {"id": "1"}, {"id": "2"}, {"id": "3"}, {"id": "4"}, ]; $scope.selection = { ids: {} }; $scope.sendMe = function(message) { //send the data with `id` and ...

javascriptangularjscheckbox

Is there a way to determine the remaining time or percentage until document.ready is reached?

My usual approach is to display a loading animation like this: $('#load').show(); $(document).ready(function(){ $('#load').hide(); }); where the <div id="load"> contains just an animated gif. However, I've been conside ...

javascriptjquerypageload

Begin the React counter with a starting value of two

Recently, I set up a new React application using the create-react-app command and ran a test with a render counter. Here is the code snippet: import React, { useState } from "react"; let render = 0; export default function App() { const [cou ...

javascriptreactjs

Extracting information from JSON ( AngularJS)

I have a collection of questions stored in my JSON file, but I want to display only one at a time until the user selects the correct answer and proceeds to the next question. Here is the HTML template: <div ng-controller="quizController"> <ul> ...

jsonangularjshtml

Error: The Tabs component is expecting a different `value`. The Tab with the current `value` ("0") is not present in the document structure

I am encountering an issue while using MUI tabs. The error message I receive is as follows: MUI: The value assigned to the Tabs component is not valid. The Tab with this value ("0") does not exist in the document layout. Please ensure that the tab item is ...

javascriptreactjsmaterial-uitabs

Tips for configuring ejs data within the data attribute and processing it using client-side JavaScript

My aim is to transfer leaderboard information from the server to the client-side JavaScript. This is the code on my server side: const leaderboard = [[dog,cat],[car,bus],[foo,bar]] const toJson = JSON.stringify(leaderboard) res.render('gam ...

javascriptjsonexpressejs

CORS has prevented the redirection

As I am sending a redirect from a POST API to an adfs server via HttpServletResponse containing a URL with status 302, I encountered the following error: The XMLHttpRequest cannot load Resource A. The redirect from Resource A to Resource B has been bl ...

javaangularjsspringcors