Production build failed with error "Argument of type 'FormGroup' is not assignable to parameter of type 'NgForm'" in angular reactive form

Question

Production build failed with error "Argument of type FormGroup is not assignable to parameter of type NgForm" in angular reactive form

ng build --prod is giving error in reactive form

error as below

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'.

components.ts

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)
    });

component.html

<code>
<form [formGroup]="myForm" (ngSubmit)="register(myForm)">
<div>
  <label>Name</label>
  <input type="text" name="name" formControlName="name">
  <show-errors [control]="myForm.controls.name"></show-errors>
</div>

<div>
  <label>Birth Year</label>
  <input type="text" name="birthYear" formControlName="birthYear">
  <show-errors [control]="myForm.controls.birthYear"></show-errors>
</div>

<div formGroupName="location">
  <h3>Location</h3>
  <div>
    <label>Country</label>
    <input type="text" name="country" formControlName="country">
    <show-errors [control]="myForm['controls'].location['controls'].country"></show-errors>
  </div>
  <div>
    <label>City</label>
    <input type="text" name="city" formControlName="city">
    <show-errors [control]="myForm['controls'].location['controls'].city"></show-errors>
  </div>
</div>

<div formArrayName="phoneNumbers">
  <h3>Phone numbers</h3>
  <div *ngFor="let phoneNumberControl of myForm['controls'].phoneNumbers['controls']; let i=index;">
    <label>Phone number {{i + 1}}</label>
    <input type="text" name="phoneNumber[{{phoneId}}]" [formControlName]="i">
    <button type="button" (click)="remove(i); myForm.controls.phoneNumbers.markAsTouched()">remove</button>
    <show-errors [control]="phoneNumberControl"></show-errors>
  </div>
  <button type="button" (click)="add(); myForm.controls.phoneNumbers.markAsTouched()">Add phone number</button>
  <show-errors [control]="myForm['controls'].phoneNumbers"></show-errors>
</div>

   <button type="submit">Register</button>
   <button type="button" (click)="printMyForm()">Print to console</button>
</form>
</code>

Answer 1

check your component.ts file code

register(data: NgForm)

Remove NgForm from there.

register(data)

This will work