Exploring the depths of Angular8: Utilizing formControlName with complex nested

After dedicating numerous hours to tackle this issue, I finally came up with a solution for my formGroup setup:

 this.frameworkForm = this.formBuilder.group({
      id: [null],
      name: ['', Validators.required],
      active: [true],
      parsingRequired: [false],
      reviewRequired: [false],
      frameworkSortingType: {
        id: null,
        environmentalSortingType: '',
        socialSortingType: '',
        governanceSortingType: '',
      },
    });

While working on my template, I encountered a challenge in extracting value from environmentalSortingType:

     <div class="alphabetically">
                      <label class="control-label bold-label" for="reviewRequired">Alphabetically</label>
                      <div class="p-field-radiobutton">
                        <p-radioButton [name]="'environmental'" value="alphabetically"
                                       formControlName="frameworkSortingType.environmentalSortingType"
                        ></p-radioButton>

 <p-radioButton [name]="'environmental'" value="numerically"
                                   formControlName="frameworkSortingType.environmentalSortingType"
                    ></p-radioButton>
                      </div>

I struggled with the use of . in 

formControlName="frameworkSortingType.environmentalSortingType"
. Any suggestions on how to overcome this hurdle? I've explored various approaches without achieving success:(

UPDATE

To address the issue, I adjusted my code by introducing a nested formGroup. However, I'm still encountering an error: Cannot find control with unspecified name attribute (

<div class="sorting" formGroupName="frameworkSortingType">
)

 ngOnInit() {
    this.frameworkForm = this.formBuilder.group({
      id: [null],
      name: ['', Validators.required],
      active: [true],
      parsingRequired: [false],
      reviewRequired: [false],
      frameworkSortingType: this.formBuilder.group( {
        id: null,
        environmentalSortingType: '',
        socialSortingType: '',
        governanceSortingType: '',
      }),
    });

Here is the updated section of my template:

  <div class="sorting" formGroupName="frameworkSortingType">
                <div class="alphabetically">
                  <label class="control-label bold-label" for="reviewRequired">Alphabetically</label>
                  <div class="p-field-radiobutton">
                    <p-radioButton [name]="'environmental'" value="alphabetically"
                                   formControlName="environmentalSortingType"
                    ></p-radioButton>
                  </div>
angulartypescriptformsformgroups

Answer №1

After reading this informative blog post, you have the option to create a new form group called frameworkSortingType and incorporate it within the main form group as shown below.

https://i.sstatic.net/8OFn3.png

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

Exploring Angular 10 Formly: How to Retrieve a Field's Value within a Personalized Formly Wrapper

Utilizing Angular 10, I have a formly-form with a select-field named session. This select field provides options from which to choose a dndSession. Each option holds key-value pairs within an object. I want to add a button next to the select-field that tr ...

angulartypescriptangular-formlyngx-formly

How to highlight a specific date in angular 10's mat-date-range-input using a specific

Currently, I am working on a project that involves integrating the MatDatePicker component from Angular Material to create a customized calendar for specific dates. However, I have run into an issue when trying to add custom CSS classes to certain calendar ...

angularangular-materialdatepickermat-datepicker

Flag is activated to retrieve the data from the @Input source

@Input() config= []; flag = false; I need to change the flag to true only when I receive data in the config from the @input. Where should I do this? The data in the config is delayed and I am unable to access it in ngOnInit but can get it in ngOnChanges. ...

javascriptangulartypescript

"Unraveling the layers: Mastering nested API calls in

Is there a more efficient method to accomplish this task of retrieving all users along with their photos: this.authHttp.get(this.ApiUrl+'users') .map(res => res.json()) .subscribe(users => { for (let user of users) { ...

angularionic-frameworkrxjs

The CanLoad guard does not permit access to the root route

My original idea was to create a project where the main website, located at "/", would only be loaded lazily after the user logs in. const routes: Routes = [ { path: '', canLoad: [AuthGuard], loadChildren: './home/home.module#HomeModule&a ...

angularcanactivate

Is there a way to modify a single object within an array?

Here is the HTML representation of my data: https://i.sstatic.net/VbKQ4.png page.html <ul id="elements"> <li *ngFor="let elem of fetchdata" (click)="log(elem)"> {{elem.title}} {{elem.description}} </li> ...

angulartypescript

The Scope does not contain a definition for the basic AngularJS Form

Recently, I started experimenting with AngularJS forms on jsfiddle and ran into an issue where a basic form example was not behaving as expected. The named form I created wasn't appearing in the scope as anticipated (I was expecting a FormController i ...

formsangularjs

Error message: The element state is invalid. It must be editable by the user in order to be cleared. This error occurred while attempting to click and input a date on a dropdown

I'm facing an issue while trying to automate the insertion of a date in a calendar using selenium. The error message I received is as follows: invalid element state: Element must be user-editable in order to clear it. Here's the relevant HT ...

angularseleniumselenium-webdriverwebdriverwaitexpected-condition

Is it possible to insert a button into a specific column of an ngx-datatable within an Angular 8 application?

I am having trouble with this particular HTML code. <ngx-datatable-column name="Option" prop="option" [draggable]="false" [resizeable]="false [width]="250"> <span> <button class="optionButton" type="button" data-to ...

htmlcssangularangular8ngx-datatable

What is the best way to define a function agreement in Typescript?

I have created a function that can return `undefined` only when its argument is also `undefined`, otherwise it will always return a value derived from the argument provided. Here's an example of how the function works: function triple(value?: number) ...

typescript

Angular 4 - Seeking clarification on the usage of *ngComponentOutlet

When using *ngComponentOutlet, the following code snippets are employed to handle the displaying: Below is a snippet of functional code: this.displayComponent({ 'objects':[ {component: ToDisplayAComponent, expanded: fals ...

angulartypescriptangular-directive

The validators in the FormControl are inconsistently functioning, showing up where they shouldn't and sometimes failing to work where

I am currently developing a dynamic form in Angular that allows users to request any number of parts, generating rows of input fields for each part. Each part has specific required fields, some of which should only accept numbers. I have implemented valid ...

angulartypescriptangular-reactive-forms

Reactive forms in Angular do not refresh or update automatically when a new error is added

Upon initializing my FormGroup in the ngOnInit() method, I invoke a validator function to ensure that the password and confirmPassword fields match. This is how it looks in TypeScript: regForm: FormGroup; constructor() { } ngOnInit() { this.regFo ...

angularangular-reactive-formsangular-custom-validators

Assign the filename to the corresponding label upon file upload

I've customized my file uploader input field by hiding it and using a styled label as the clickable element for uploading files. You can check out the implementation on this jsFiddle. To update the label text with the actual filename once a file is s ...

javascriptjqueryhtmlformsfile-upload

Issue with loading CSS in Angular 8 upon refreshing the page after building in production

Here is the structure of my index.html: <!doctype html> <html lang="hu"> <head> <meta charset="utf-8"> <title>WebsiteName</title> <base href="/"> <meta name="viewport& ...

angulartypescriptroutespage-refresh

What is the best way to establish anchors for *ngFor elements in Angular 2 and beyond?

I have a component that displays items using *ngFor. My goal is to scroll down to the element with anchor #3. Here's the code snippet: @Component({ selector: 'my-app', template: ` <button (click)="scroll(3)">scroll 2</butt ...

javascripthtmlangularscrollngfor

Angular2 allows for the firing of all columns in one click using *ngFor

<tr *ngFor = 'let student of students> <td contenteditable="true" class ='phone' #button> {{student.phone}} <i (click)='showbox()' class = ' glyphicon glyphicon-edit'></i> <input *ngIf=&apo ...

angulartypescript

Issue with form action redirection on Node JS Express server not functioning correctly

My EJS application involves using jQuery in the JavaScript code to fetch JSON data from the Google Custom Search API. The app then uses the GET method to navigate to /search, passing the query as the attribute for q. Here's an example of the form&apos ...

javascriptjquerynode.jsformsexpress

What steps can be taken to resolve the issue with Angular routing?

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import {HomeComponent} from "./home/home.component"; import {SettingsComponent} from "./settings/settings.component"; ...

javascriptnode.jsangular

ag-grid-angular failing to present information in a table layout

I have implemented ag-grid-angular to showcase data in a structured table format, but the information appears jumbled up in one column. The data for my ag-grid is sourced directly from the raw dataset. https://i.stack.imgur.com/sjtv5.png Below is my com ...

angulartypescriptag-grid