Angular Form Group without a name

Struggling to loop through my formgroups to identify which ones are valid and add the invalid ones to a new array. I can't seem to grab the name value for each formgroup.

 this.applicationFormArray = new FormGroup({   
        selectAppFormGroup:this.selectAppFormGroup = new FormGroup({
        }),
        generalAppFormGroup:this.generalAppFormGroup = new FormGroup({
        }),
        fileModeFormGroup:this.fileModeFormGroup = new FormGroup({
        }),
        accessListFormGroup:this.accessListFormGroup = new FormGroup({
        })
    });

    this.applicationFormGroup.addControl('applicationFormArray', this.applicationFormArray);

checkValidity() {
        for (let c of Object.getOwnPropertyNames(this.applicationFormArray.controls)) {
            if(!this.applicationFormArray.controls[c].valid) {
                var invalidFormGroups = new Array;
                var grabFormGroups = console.log(this.applicationFormArray.controls[c].get('?????'));
                invalidFormGroups.push(grabFormGroups);
            }
        } 
    }

https://i.sstatic.net/Acjsx.jpg

Answer №1

The root form group is currently unnamed. To assign names, place them within an additional 'root' form group.

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

Improving the quality of shadows in Three.js

I'm looking to create realistic shadows in my scene using a DirectionalLight to simulate sunlight. However, I'm struggling with the shadow quality settings - toggling between on/off, Low, Normal, and High: Setting parameters a and b within these ...

Top method for combining several external JavaScript libraries into a single one using webpack

Recently, I was diving into the world of webpack tutorial and it struck me that in order to combine everything into one module, scripts need to use require('./xyz'). Until now, I've always written individual scripts and loaded them in HTML u ...

Combining Angular 2 and Node.js for development

Check out my file directory here Currently, I am in the process of integrating angular2 with nodejs. However, I seem to be facing an issue where index.js is unable to locate the index.html file. Any assistance provided would be greatly appreciated as I am ...

Express NodeJS encountering issues with partials

I am currently experimenting with using partials in my ExpressNodeJS project. My Node version is 3.x. This is the structure of my project directory: D:\eclipse\workspace\test I have created a sub-folder and added headModule.ejs in the vi ...

Prevent form submission from refreshing the page by using jQuery and ajax

I'm looking to submit a form without refreshing the page, but my current script isn't working as expected: $('#formId').submit(function(e){ $.ajax({ type: "POST", url: 'serverSide.php', data: $(&ap ...

Execute a JavaScript function daily for each new user

Can someone help me understand how to execute a JavaScript/jQuery function that triggers a PopUp once for each new user visiting a webpage? Below is the code I need assistance with. $(window).load(function() { $('#index9').fadeIn("slow"); ...

jQuery sidebar with a fixed position

Is there a way to implement a sidebar menu feature using jQuery that reappears on the left as the user scrolls down the page? You can see an example sidebar menu here. ...

Even though I am attempting to submit a form without refreshing the page using Ajax, it is still causing

I've searched high and low, read through numerous examples on various forums, and attempted to find the solution to my query but unfortunately, it still eludes me. Here's the particular scenario I'm facing: Main.php The main.php page featu ...

In Rxjs, ConcatMap doesn't get executed

I am currently developing a file upload component that involves checking for the existence of a file before proceeding with the upload process. If the file already exists, the user is given the option to either save as a copy or overwrite the existing file ...

Creating an ngFor loop with an ngIf condition for true and false bot conditions

I am attempting to troubleshoot an issue where if my condition is true, return true. If my condition is false, return false. However, currently, if only one condition is true, all conditions are being applied as true. Please help me resolve this problem. ...

Angular6 implementation of a 3D card carousel

Looking for a library to create a 3D Card Slider similar to the image below using Angular6? Check it out here ...

Steps for making a dynamic number animation

Is there a way to create dynamic number changes when the user stops on a page using HTML, CSS, and JavaScript? I'd like the numbers to change as the user scrolls through the page until they come to a stop. I want the numbers to update quickly while t ...

An endless loop is occurring, preventing the form control value from being updated using a global service. This results in an error message indicating that the maximum stack size

<input class="form-control dateicon" maxlength="10" minlength="10" [maxDate]="api.maxDate" name="xyz" (ngModelChange)="def($event,2)"[bsConfig]="{ isAnimated: true ,dateInputFormat: 'DD/MM/YYYY'}" formControlName="abc" bsDatepicker placeholder ...

Avoid storing js files in cache during the development phase

When I use django runserver for development, I encounter the issue of my javascript file being cached. It's difficult to determine if the file is cached or not unless I manually add alert or console.log statements each time I make a change just to che ...

Implementing dynamic props in Vue2 component by passing arbitrary named variables

Having recently delved into Vue, I am facing a challenge that has left me scratching my head after consulting the documentation: I am struggling to pass an arbitrarily named variable as a prop to a component instance. As per my understanding, props serve ...

A guide on demonstrating time using the AngularJS date filter

Is it possible to display the time in AM and PM using the angular date filter? I attempted to achieve this with the provided code, however, it did not yield the desired result. <div>{{ '12:31:07' | date:'HH:mm' }}</div> ...

How can I utilize ng-repeat in AngularJS to iterate through an array of objects containing nested arrays within a field?

Here is the structure of an array I am working with: 0: {ID: null, name: "test", city: "Austin", UserColors: [{color: "blue"},{hobby:"beach"} ... ]} }... I am currently attempting to ng-repeat over this initial array in my code. However, when I tr ...

The fixed position setting does not anchor the elements to the bottom of a container

When applying the following styles: #fullpage-menu > .gradient { position: fixed; bottom: 0; left: 0; width: 100%; height: 0.3rem; } To the element with ID #fullpage-menu, which is styled as follows: #fullpage-menu { height: 100 ...

Is there a way to turn off Sequelize syncing?

I need assistance with my nodejs project where I am trying to establish a connection with mysql. The issue is that the connection is automatically creating tables based on the models defined, which is not what I want. How can I disable this automatic table ...

Utilizing PHP to dynamically load HTML forms and leveraging JQuery for form submissions

I am currently facing a dilemma that I am unsure how to approach. It seems that JQuery requires unique ID's in order to be called in the document ready function. I use PHP to read my MySQL table and print out HTML forms, each with a button that adds a ...