title: Angular 14: Cannot read properties of undefined (reading 'controls')
body: <p>Need to compare two fields' values, validation is put into 2nd field's validation.</p>
  <p>HTML:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;form [formGroup]=&quot;fg&quot;&gt;
          F1: &lt;input type=&quot;text&quot; class=&quot;..&quot; formControlName=&quot;f1&quot; id=&quot;f1&quot; (blur)=&quot;b($event)&quot; .../&gt;
          F2: &lt;input type=&quot;text&quot; class=&quot;..&quot; formControlName=&quot;f2&quot; id=&quot;f2&quot; .../&gt;
      &lt;/form&gt;
  </code></pre>
  <p>TS:</p>
  <pre class="lang-js prettyprint-override"><code>    import {  FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
      export class c implements OnInit 
      {
          public fg!: FormGroup;   // another SO's accepted answer to tell ng not init yet.
          public b1: number = 0;
          
          constructor(private fb: FormBuilder)    // same error if &quot;public&quot; to &quot;private&quot;, or moving content into ngOnInit()
          {
              this.fg = this.fb.group(
              {
                  f1: ['', [Validators.required]] ,
                  f2: ['', [Validators.required, this.compare1n2()]]
              }      
          );
          
          private compare1n2()
          {
              // runtime complains about this line, same for .get('f1')
              const v1 = this.fg.controls['f1'].value;    
              
              return (control: FormControl) =&gt;
              {
                  const v2 = control.value || '';
                  return (v1 != v2) ? {bad: 1} : null;  // workaround is to compare with b1.
              }
          }
          
          public b(e: any) {this.b1 = this.fg.controls['f1'].value; // ok too .get('f1').value
      }   
  </code></pre>
  <p>Everything works well except 1st line of <code>compare1n2()</code>. I've studied and used answers from <a href="https://stackoverflow.com/a/67616242/5063031">post1</a>, and <a href="https://stackoverflow.com/q/62810660/5063031">post2</a>.</p>
  <p>Change <code>this.fg = this.fb.group({...})</code> to below,</p>
  <pre class="lang-js prettyprint-override"><code>    this.fg = new FormGroup(
      {
          f1: new FormControl('', [Validators.required]) ,
          f2: new FormControl('', [Validators.required, this.compare1n2()])
      }   
  </code></pre>
  <p>still the same <strong>Cannot read properties of undefined (reading 'controls')</strong></p>