Question

生产构建失败，错误＆＃34;类型FormGroup的参数不能分配给NgForm＆＃34;类型的参数。角度反应形式

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)

这将有效

生产构建失败，错误＆＃34;类型＆＃39; FormGroup＆＃39;不能分配给＆＃39; NgForm＆＃39;＆＃34;类型的参数。角度反应形式

1 个答案: