title: Why is form: FormGroup showing 'controls' as undefined in an Angular11 component?
body: <p>I'm new to Angular 11 and TypeScript in general.. I'm attempting to access the 'controls' property in an explicitly defined 'FormGroup' var. It keeps telling me that property is undefined...</p>
  <pre><code>send(form: FormGroup): void{
      let jsonModel = {
        materialNum: form.controls['materialNum'].value,
      };
  
      let jsonModelRaw: string = JSON.stringify(jsonModel);
      //...
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/mKzKb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mKzKb.png" alt="enter image description here" /></a></p>
  <p>I have the following declared:</p>
  <pre><code>import { FormBuilder, FormControl, FormGroup, NgForm, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
  </code></pre>
  <p>Component's HTML:</p>
  <pre><code>  &lt;mat-vertical-stepper [linear]=&quot;isLinear&quot; #stepper&gt;
      &lt;mat-step [completed]=&quot;stepOneDone&quot; [stepControl]=&quot;newMaterialFormGroup&quot;&gt;
        &lt;form [formGroup]=&quot;newMaterialFormGroup&quot;
              name=&quot;newMaterialForm&quot;
              #newMaterialForm=&quot;ngForm&quot;
              (ngSubmit)=&quot;send(newMaterialFormGroup.value)&quot;&gt;
          &lt;ng-template matStepLabel&gt;Fill out new material form&lt;/ng-template&gt;
          &lt;mat-form-field&gt;
            &lt;mat-label&gt;Material #&lt;/mat-label&gt;
            &lt;input matInput placeholder=&quot;Material ID&quot; formControlName=&quot;MaterialNum&quot; required&gt;
          &lt;/mat-form-field&gt;
  </code></pre>