title: Angular Error: Cannot read properties of null (reading 'controls')
body: <p>I am currently trying to understand how FormArrays, FormGroups and FormControls work. I want to insert data to my firebase collection in the format below.</p>
  <p><a href="https://i.stack.imgur.com/KNVem.png" rel="nofollow noreferrer">Firebase Format</a></p>
  <p>My code compiles successfully but I get an error in the console that says core.js:6486 ERROR TypeError: Cannot read properties of null (reading 'controls')
  at AddRecipeComponent_Template (add-recipe.component.html:56). Is there something I am missing like initializations?</p>
  <p>my model looks like this:
  <em>Recipe.ts</em></p>
  <pre><code>export interface Recipe {
    id: string;
    metaData: {
      name: string;
      img: string;
      description: string;
      viewed: number;
    };
    recipeDetails: {
      ingredients: Ingredients[],
      instructions: string,
      cookingTime: string,
      servingPortion: string,
      dietaryInformation: string
    }
  }
  
  export interface Ingredients {
    name: string,
    amount: number,
    unit: string
  }
  
  export type RecommendedRecipe = { id: string } &amp; Recipe['metaData'];
  export type RecipeDetail = { id: string } &amp; Recipe['metaData'] &amp; Recipe['recipeDetails'];
  </code></pre>
  <p><em>add-recipe.component.html</em></p>
  <pre><code>&lt;div class=&quot;container mb-5&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
  
      &lt;form [formGroup]=&quot;addRecipeForm&quot; class=&quot;row g-3&quot;&gt;
  
        &lt;div formGroupName=&quot;metaData&quot;&gt;
  
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;label for=&quot;name&quot;&gt; Recipe Name &lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;name&quot; class=&quot;form-control&quot; formControlName=&quot;name&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;label for=&quot;img&quot;&gt; Img &lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;img&quot; class=&quot;form-control&quot; formControlName=&quot;img&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;label for=&quot;description&quot;&gt; Description &lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;description&quot; class=&quot;form-control&quot; formControlName=&quot;description&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-2&quot;&gt;
            &lt;input type=&quot;number&quot; name=&quot;viewed&quot; class=&quot;form-control&quot; formControlName=&quot;viewed&quot; value=1 hidden /&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div formGroupName=&quot;recipeDetails&quot;&gt;
  
  
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;label for=&quot;cookingTime&quot;&gt; Cooking Time &lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;cookingTime&quot; class=&quot;form-control&quot; formControlName=&quot;cookingTime&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;label for=&quot;servingPortion&quot;&gt; Serving Portion &lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;servingPortion&quot; class=&quot;form-control&quot; formControlName=&quot;servingPortion&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;label for=&quot;dietaryInformation&quot;&gt; Dietary Information &lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;dietaryInformation&quot; class=&quot;form-control&quot; formControlName=&quot;dietaryInformation&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;label for=&quot;instructions&quot;&gt; Instructions &lt;/label&gt;
            &lt;textarea class=&quot;form-control&quot; name=&quot;instructions&quot; rows=&quot;20&quot; style=&quot;resize: none;&quot;
              formControlName=&quot;instructions&quot;&gt;&lt;/textarea&gt;
          &lt;/div&gt;
  
          &lt;br/&gt;
  
          &lt;div class=&quot;col-md-2 d-md-flex justify-content-md-end&quot;&gt;
            &lt;button class=&quot;btn btn-primary&quot; (click)=&quot;addIngredients()&quot;&gt; Add Ingredients &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;br/&gt;
  
          &lt;!--Ingredients--&gt;
          &lt;div formArrayName=&quot;ingredients&quot; *ngFor=&quot;let ing of ingredients.controls; let i = index&quot;&gt;
  
            &lt;div [formGroupName]=&quot;i&quot;&gt;
              &lt;div class=&quot;col-md-2&quot;&gt;
                &lt;label for=&quot;name&quot;&gt; Ingredients Name &lt;/label&gt;
                &lt;input type=&quot;text&quot; name=&quot;name&quot; class=&quot;form-control&quot; formControlName=&quot;name&quot; /&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-md-2&quot;&gt;
                &lt;label for=&quot;amount&quot;&gt; Amount &lt;/label&gt;
                &lt;input type=&quot;number&quot; name=&quot;amount&quot; class=&quot;form-control&quot; formControlName=&quot;amount&quot; /&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-md-2&quot;&gt;
                &lt;label for=&quot;unit&quot;&gt; Unit &lt;/label&gt;
                &lt;select name=&quot;unit&quot; class=&quot;form-control&quot; formControlName=&quot;unit&quot;&gt;
                  &lt;option value=&quot;&quot;&gt; Please Select Unit &lt;/option&gt;
                  &lt;option *ngFor=&quot;let unitOpt of unitOptions&quot; [value]=&quot;unitOpt&quot;&gt;{{ unitOpt }}&lt;/option&gt;
                &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-md-6&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;col-md-6&quot;&gt;&lt;/div&gt;
              &lt;br /&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
  
        &lt;div class=&quot;col-md-6&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-md-6&quot;&gt;&lt;/div&gt;
  
        &lt;div class=&quot;col-md-2 gap-3 d-md-flex justify-content-md-end&quot;&gt;
          &lt;button class=&quot;btn btn-primary&quot; (click)=&quot;addRecipe()&quot;&gt; Add Recipe &lt;/button&gt;
          &lt;a href=&quot;/recipe-list&quot; class=&quot;btn btn-warning&quot;&gt; Cancel &lt;/a&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><em>add-recipe.component.ts</em></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormArray, FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
  import { Router } from '@angular/router';
  import { Recipe } from 'src/app/models/Recipe';
  import { LoadingService } from 'src/app/services/loading.service';
  import { RecipeService } from 'src/app/services/recipe.service';
  
  @Component({
    selector: 'app-add-recipe',
    templateUrl: './add-recipe.component.html',
    styleUrls: ['./add-recipe.component.scss']
  })
  export class AddRecipeComponent implements OnInit {
    addRecipeForm: FormGroup;
    unitOptions: string[] = [
      'Piece(s)',
      'Slice(s)',
      'Liter(s)',
      'Milliliter(s)',
      'Gram(s)',
      'Kilogram(s)'
    ]
  
    constructor(
      private recipeService: RecipeService,
      private loadingService: LoadingService,
      private router: Router,
      private fb: FormBuilder
    ) {
      this.addRecipeForm = this.fb.group({
        metaData: this.fb.group({
          name: [''],
          img: [''],
          description: [''],
          viewed: ['']
        }),
        recipeDetails: this.fb.group({
          instructions: [''],
          cookingTime: [''],
          servingPortion: [''],
          dietaryInformation: [''],
          ingredients: this.fb.array([
            this.addIngredientsFormGroup()
          ],Validators.required)
        })   
      });
    }
  
    ngOnInit() {
    }
  
    public addIngredientsFormGroup(): FormGroup {
      return this.fb.group({
        name: [''],
        amount: [''],
        unit: ['']
      })
    }
  
    get ingredients():FormArray{
      return &lt;FormArray&gt; this.addRecipeForm.get('ingredients');
    }
  
    addIngredients() {
      this.ingredients.push(this.addIngredientsFormGroup());
    }
  
    public addRecipe(): void {
      // bind to Recipe Model
      var newRecipe = {
        metaData: this.addRecipeForm.value.metaData,
        recipeDetails: this.addRecipeForm.value.recipeDetails
      } as unknown as Recipe;
  
      console.log('addRecipeForm -&gt; ', newRecipe);
  
      this.recipeService.createRecipe(newRecipe)
      .subscribe(
        (result) =&gt; {
          console.log(&quot;add result&quot;, result);
          this.router.navigateByUrl('/recipe-list');
        }
      );
    }
  
    onSubmit(): void {
      console.log(this.addRecipeForm);
    }
  
  }
  </code></pre>