control.registerOnChange is not a function

user_73323 0
Viewed 17775

I'm building a custom address component. I'm using it in a component:

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;

}

I'm getting this error:

TypeError: control.registerOnChange is not a function

angular
2 Answers

If you're using form group along from array then you may get you may get this error 'control register on change is not a function'.

I used initially like this -

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

<input type="checkbox" (change)="onTagValueChange(item, 'jobTitle', $event.target.checked)" [checked]="tagSelected(item, 'jobTitle')" formArrayName="jobTitle"> {{ item }}

use formArrayName instead of fromControlName to solve this issue.

user_31982350

I got stuck on this issue in one of my ionic-3 projects and I found out that I used one form control name multiple times in template. Like 

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


After changing formControlName in 2nd ion-item to sub-category, issue was resolved.

user_53585990
Related