angular - 生产构建失败，错误为 “Argument of type ' FormGroup'不能以 Angular react 形式分配给 'NgForm'类型的参数

Question

生产构建失败，出现错误“Angular react 形式的错误信息:FormGroup类型的参数无法分配给NgForm类型的参数”

ng build --prod is giving error in reactive form

错误如下

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

检查您的component.ts文件代码

register(data: NgForm)

从那里删除NgForm。

register(data)

这会工作