(Angular 11) TypeError: control.registerOnChange is not a function

Question

i need the values in a dynamic form but always show me this error "ERROR Error: control.registerOnChange is not a function"

i build my form like this:

referential.values.forEach(referentialValue => {
    const newFormGroup = new FormGroup({
      value: new FormControl(referentialValue.value),
      libelle: new FormControl(referentialValue.libelle),
      primaryColor: new FormControl(referentialValue.primaryColor),
      secondaryColor: new FormControl(referentialValue.secondaryColor),
      borderColor: new FormControl(referentialValue.borderColor),
      default: new FormControl('')
    });
    this.referentialArray.push(newFormGroup);
  });
this.form = new FormGroup({
  referentials: this.referentialArray
});
this.form.disable();

and the html (not whole):

  <tbody formArrayName="referentials">
    <tr *ngFor="let referential of referentialArray.controls; let i = index">
      <td><input type="text"
          [formControlName]="i"></td>
      <td><input type="text"
          [formControlName]="i"></td>

any ideas?

spots · Accepted Answer · 2021-07-23 13:22:10Z

1

You are close, change formControlName to formGroupName in you referential loop.

It will look something like this:

<form [formGroup]="myForm" (ngSubmit)="submit(myForm.value)">
  <div formArrayName="referentials">
    <div *ngFor="let child of myForm.get('referentials').controls; let i = index">
      <div [formGroupName]="i">
        <label>{{i+1}}. Label: </label>
        <input formControlName="label" /><br>
        <label>{{i+1}}. Value: </label>
        <input formControlName="value" />
      </div>
      <br>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

Working example on stackblitz

answered Jul 23, 2021 at 13:22

spots

2,7485 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Skullkid Saquet Over a year ago

when i do this: myForm.get('referentials').controls I have an error which tells me: Property 'controls' does not exist on type 'AbstractControl' but it's pretty close

Skullkid Saquet Over a year ago

Okay, i change the ngFor loop like this: *ngFor="let _ of referentialArray.controls; let i = index" with referentialArray has my FormArray, and it work properly, thanks

vk-code · Accepted Answer · 2021-07-23 13:22:00Z

I take that this.referentialArray is a simple array

this.form = new FormGroup({
  referentials: this.referentialArray
});

can you try something like following?

this.form = new FormGroup({
  referentials: new FormArray([])
});

var refFormArray = this.form.get('referentials') as FormArray;
referential.values.forEach(referentialValue => {
    const newFormGroup = new FormGroup({
      value: new FormControl(referentialValue.value),
      libelle: new FormControl(referentialValue.libelle),
      primaryColor: new FormControl(referentialValue.primaryColor),
      secondaryColor: new FormControl(referentialValue.secondaryColor),
      borderColor: new FormControl(referentialValue.borderColor),
      default: new FormControl('')
    });

    refFormArray.push(newFormGroup);
  });

Collectives™ on Stack Overflow

(Angular 11) TypeError: control.registerOnChange is not a function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related