title: Access property in nested form
body: <p>So I've this code:
  TS</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormControl, Validators, FormBuilder } 
      from '@angular/forms';
  
  @Component({
    selector: 'app-hotel',
    templateUrl: './hotel.component.html',
    styleUrls: ['./hotel.component.scss']
  })
  export class HotelComponent {
    click:boolean = false
  
    showForm = () =&gt; {
      this.click = true
    }
  
  
    hotelRegUser = this.fb.group({
      &quot;userName&quot;: [&quot;&quot;, Validators.required],
      &quot;userNumber&quot;: [&quot;&quot;, Validators.required],
      &quot;userComingDate&quot;: [&quot;&quot;, Validators.required],
      &quot;userDays&quot;: [&quot;&quot;, Validators.required],
      &quot;userBreakfast&quot;: [&quot;&quot;, Validators.required],
  
      extraAct: this.fb.group({
        &quot;pool&quot;: [&quot;&quot;],
        &quot;kino&quot;: [&quot;&quot;],
        &quot;resturant&quot;: [&quot;&quot;]
      })
    });
  
    constructor(private fb: FormBuilder) {
    }
  
    submit = () =&gt; {
      console.log(&quot;reactive form submitted&quot;);
      console.log(this.hotelRegUser[&quot;controls&quot;][&quot;extraAct&quot;]);
    }
  
    totalPrice = () =&gt; {
      let price = 0
      price += Number(this.hotelRegUser.controls[&quot;userDays&quot;].value)*1200
      if (this.hotelRegUser.controls[&quot;userBreakfast&quot;].value == &quot;true&quot;){
        price += Number(this.hotelRegUser.controls[&quot;userDays&quot;].value)*300
      }
      return price
    }
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;h3&gt;Velkommen til Fredrikstad Hotell!&lt;/h3&gt;
  
  &lt;ng-template [ngIf]=&quot;click == true&quot;&gt;
      &lt;p&gt;For bestilling fyll ut skjemaet &lt;button (click)=&quot;showForm()&quot; mat-raised-button color=&quot;primary&quot;&gt;her&lt;/button&gt;&lt;/p&gt;
  &lt;/ng-template&gt;
  &lt;ng-template [ngIf]=&quot;click == false&quot;&gt;
      &lt;section class=&quot;sample-app-content&quot;&gt;
          &lt;form [formGroup]=&quot;hotelRegUser&quot; (ngSubmit)=&quot;submit()&quot;&gt;
              &lt;h4&gt;Navn&lt;/h4&gt;
              &lt;input type=&quot;text&quot; formControlName=&quot;userName&quot; required placeholder=&quot;Ola Normann&quot; id=&quot;name&quot;&gt;
          
              &lt;h4&gt;Telefonnummer&lt;/h4&gt;
              &lt;input type=&quot;number&quot; formControlName=&quot;userNumber&quot; required placeholder=&quot;00 00 00 00&quot;&gt;
          
              &lt;h4&gt;Innskjekkingsdato&lt;/h4&gt;
              &lt;input type=&quot;date&quot; formControlName=&quot;userComingDate&quot; required id=&quot;date&quot;&gt;
          
              &lt;h4&gt;Antall døgn&lt;/h4&gt;
              &lt;label for=&quot;days&quot;&gt;Velg: &lt;/label&gt;
              &lt;select formControlName=&quot;userDays&quot; required id=&quot;days&quot; name=&quot;days&quot;&gt;
                  &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
                  &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
                  &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
                  &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
                  &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
                  &lt;option value=&quot;6&quot;&gt;6&lt;/option&gt;
                  &lt;option value=&quot;7&quot;&gt;7&lt;/option&gt;
              &lt;/select&gt;
          
              &lt;label for=&quot;breakfast&quot;&gt;&lt;h4&gt;Inkludert frokost? (300kr per dag)&lt;/h4&gt;&lt;/label&gt;
              &lt;mat-radio-group aria-label=&quot;breakfast&quot; required formControlName=&quot;userBreakfast&quot;&gt;
                  &lt;mat-radio-button value=true&gt;Ja&lt;/mat-radio-button&gt;
                  &lt;mat-radio-button value=false&gt;Nei&lt;/mat-radio-button&gt;
              &lt;/mat-radio-group&gt;
              
              &lt;section class=&quot;extraAct&quot; formGroupName=&quot;extraAct&quot;&gt;
                  &lt;h4&gt;Kan vi friste med ekstraaktiviteter?&lt;/h4&gt;
                  &lt;p&gt;&lt;mat-checkbox formControlName=&quot;pool&quot;&gt;Badebasseng&lt;/mat-checkbox&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;mat-checkbox formControlName=&quot;kino&quot;&gt;Kino&lt;/mat-checkbox&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;mat-checkbox formControlName=&quot;resturant&quot;&gt;Resturant&lt;/mat-checkbox&gt;&lt;/p&gt;
              &lt;/section&gt;
              &lt;p&gt;Totalpris: {{ totalPrice() }} kr.&lt;/p&gt;
              &lt;button type=&quot;submit&quot; [disabled]=&quot;!hotelRegUser.valid&quot; mat-radio-button&gt;Bekreft&lt;/button&gt;
          &lt;/form&gt;
      &lt;/section&gt;
  &lt;/ng-template&gt;
  </code></pre>
  <p>And I'm trying to access the &quot;controls&quot; thing inside extraAct, which is nested in hotelRegUser.</p>
  <pre><code>console.log(this.hotelRegUser[&quot;controls&quot;][&quot;extraAct&quot;]);
  </code></pre>
  <p>This gives this:
  <a href="https://i.stack.imgur.com/kJkGa.jpg" rel="nofollow noreferrer">Link</a>
  If you can't open this link, it basically gives a &quot;FormGroup&quot;, which has &quot;controls&quot; as one of the elements in it. I want to access this place because I'm hoping I'll be able to use a for each function to check whether or not the different statements in it is true.</p>
  <p>Any suggestions?</p>