title: Production build failed with error "Argument of type 'FormGroup' is not assignable to parameter of type 'NgForm'" in angular reactive form
body: <p>Production build failed with error "Argument of type <code>FormGroup</code> is not assignable to parameter of type <code>NgForm</code>" in angular reactive form</p>
  
  <pre><code>ng build --prod is giving error in reactive form
  </code></pre>
  
  <p>error as below</p>
  
  <pre><code>chunk {0} styles.9c0ad738f18adc3d19ed.bundle.css (styles) 79 bytes [initial] [rendered]
  chunk {1} polyfills.3bc34265385d52184eab.bundle.js (polyfills) 86 bytes [initial] [rendered]
  chunk {2} main.e402deade8b026b7d50e.bundle.js (main) 84 bytes [initial] [rendered]
  chunk {3} inline.22b7623ed7c5ac6f9a35.bundle.js (inline) 1.45 kB [entry] [rendered]
  
  ERROR in src\app\components\login\login.component.html(7,30): : Argument of type 'FormGroup' is not assignable to parameter of type 'NgForm'.
  Property 'submitted' is missing in type 'FormGroup'.
  </code></pre>
  
  <p>components.ts</p>
  
  <pre><code>this.myForm = new FormGroup({
        'name': new FormControl('', Validators.required, CustomValidators.uniqueName),
        'birthYear': new FormControl('', [Validators.required, CustomValidators.birthYear]),
        'location': new FormGroup({
          'country': new FormControl('', [Validators.required]),
          'city': new FormControl('', [Validators.required])
        }, CustomValidators.countryCity),
        'phoneNumbers': new FormArray([this.buildPhoneNumberComponent()],
          CustomValidators.telephoneNumbers)
      });
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code>&lt;code&gt;
  &lt;form [formGroup]="myForm" (ngSubmit)="register(myForm)"&gt;
  &lt;div&gt;
    &lt;label&gt;Name&lt;/label&gt;
    &lt;input type="text" name="name" formControlName="name"&gt;
    &lt;show-errors [control]="myForm.controls.name"&gt;&lt;/show-errors&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;label&gt;Birth Year&lt;/label&gt;
    &lt;input type="text" name="birthYear" formControlName="birthYear"&gt;
    &lt;show-errors [control]="myForm.controls.birthYear"&gt;&lt;/show-errors&gt;
  &lt;/div&gt;
  
  &lt;div formGroupName="location"&gt;
    &lt;h3&gt;Location&lt;/h3&gt;
    &lt;div&gt;
      &lt;label&gt;Country&lt;/label&gt;
      &lt;input type="text" name="country" formControlName="country"&gt;
      &lt;show-errors [control]="myForm['controls'].location['controls'].country"&gt;&lt;/show-errors&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label&gt;City&lt;/label&gt;
      &lt;input type="text" name="city" formControlName="city"&gt;
      &lt;show-errors [control]="myForm['controls'].location['controls'].city"&gt;&lt;/show-errors&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div formArrayName="phoneNumbers"&gt;
    &lt;h3&gt;Phone numbers&lt;/h3&gt;
    &lt;div *ngFor="let phoneNumberControl of myForm['controls'].phoneNumbers['controls']; let i=index;"&gt;
      &lt;label&gt;Phone number {{i + 1}}&lt;/label&gt;
      &lt;input type="text" name="phoneNumber[{{phoneId}}]" [formControlName]="i"&gt;
      &lt;button type="button" (click)="remove(i); myForm.controls.phoneNumbers.markAsTouched()"&gt;remove&lt;/button&gt;
      &lt;show-errors [control]="phoneNumberControl"&gt;&lt;/show-errors&gt;
    &lt;/div&gt;
    &lt;button type="button" (click)="add(); myForm.controls.phoneNumbers.markAsTouched()"&gt;Add phone number&lt;/button&gt;
    &lt;show-errors [control]="myForm['controls'].phoneNumbers"&gt;&lt;/show-errors&gt;
  &lt;/div&gt;
  
     &lt;button type="submit"&gt;Register&lt;/button&gt;
     &lt;button type="button" (click)="printMyForm()"&gt;Print to console&lt;/button&gt;
  &lt;/form&gt;
  &lt;/code&gt;
  </code></pre>