Angular8 and formControlName with nested fields

Question

I spent many hours to solve this problem. My formGroup structure is:

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

In my template I want to get value from eg. 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>

But that solution with . like formControlName="frameworkSortingType.environmentalSortingType" doesn't work. How to do that? I tried a lot of different ways... without success:(

UPDATE

I changed my code by adding nested formGroup but still I get the 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: '',
      }),
    });

and 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>

The problem is that you have used the variable frameworkSortingType as follows. <div formGroupName="frameworkSortingType">. You need to see the picture carefully. It should be done <div [formGroup]="frameworkSortingTypes"> — Derek Wang
– Derek Wang, Commented Oct 16, 2020 at 1:35
And inside that div, define the formControls belonged to frameworkSortingTypes. — Derek Wang
– Derek Wang, Commented Oct 16, 2020 at 1:41

Derek Wang · Accepted Answer · 2020-10-16 01:27:03Z

2

Based on this article, you can make frameworkSortingType as a new FormGroup and use this formGroup inside the main formGroup as follows.

answered Oct 16, 2020 at 1:27

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular8 and formControlName with nested fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related