Question

我正在构建自定义地址组件。我在一个组件中使用它：

consumer.component.html：

<form [formGroup]="form">
  <nt-address [parent]="form" fG="addrGrp" formControlName="addrGrp"></nt-address>
  {{form.value | json}}
</form>

consumer.component.ts

data = {
 addr1: 'Sample Address Line 1'
};
ngOnInit() {
  this.form = this.fb.group({
    addrGrp: this.fb.group(this.data)
  })
}

NT-address.component.html：

<div [formGroup]="parent">
   <div [formGroupName]="fG">
     <md-input-container>
       <input mdInput type="text" formControlName="addr1" placeholder="Address Line 1">
     </md-input-container>
   </div>
</div>

NT-address.component.ts：

export class AddressComponent extends ValueAccessorBase<any> {
   @Input() parent: FormGroup;
   @Input() fG: FormGroup;

}

我收到了这个错误：

TypeError：control.registerOnChange不是函数

Answer 1

如果您从数组中使用表单组，那么您可能会收到此错误“更改时的控制寄存器不是函数”。

我最初是这样使用的 -

<div class="btn-group" dropdown [insideClick]="true">
            <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic" [ngClass]="{ 'invalid': hasFieldError('jobTitle') }">
              <span class="required">*</span> Select jobTitle <i class='dropDownIcon fas fa-angle-down'></i>
            </button>
            <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic" >
              <li *ngFor="let item of jobTitleList" role="menuitem">
                <input type="checkbox" (change)="onTagValueChange(item, 'jobTitle', $event.target.checked)" [checked]="tagSelected(item, 'jobTitle')" formArrayName="jobTitle"> {{ item }}
              </li>
            </ul>
          </div>

{{ item }}

使用 formArrayName 而不是 fromControlName 来解决这个问题。

Answer 2

我在一个 ionic-3 项目中遇到了这个问题，发现我在模板中多次使用了一个表单控件名称。像

   <ion-item>
      <ion-label stacked>Category</ion-label>
      <ion-input placeholder="Enter category" formControlName="category" type="text"></ion-input>
    </ion-item>

    <!-- Sub Category --`
    <ion-item>
      <ion-label stacked>Sub Category</ion-label>
      <ion-input placeholder="Enter sub category" formControlName="category" type="text"></ion-input>
    </ion-item>

将第二个离子项目中的 formControlName 更改为子类别后，问题已解决。

control.registerOnChange不是一个函数

2 个答案: