Add dynamic formArray angular with validation

Question

Error on create form array

core.js:6260 ERROR TypeError: control.registerOnChange is not a function at setUpModelChangePipeline (forms.js:3528) at setUpControl (forms.js:3405) at FormControlDirective.ngOnChanges (forms.js:7382) at FormControlDirective.wrapOnChangesHook_inPreviousChangesStorage (core.js:26975) at callHook (core.js:4762) at callHooks (core.js:4722) at executeInitAndCheckHooks (core.js:4662) at selectIndexInternal (core.js:9724) at Module.ɵɵadvance (core.js:9685) at BuildingPartsModalComponent_div_6_Template (test.component.html:37)

Here is my code Html

   <form [formGroup]="demoForm">
        <div formArrayName="demoArray" *ngFor="let arrayItem of arrayItems; let i=index">
          <input [id]="arrayItem.parts" type="checkbox" [formControl]="arrayItems[i]">
          <label [for]="arrayItem.volume" class="array-item-title">
            {{arrayItem.name}}</label>
          <div (click)="removeItem(i)">remove item</div>
        </div>
        <button (click)="submit()">Go</button>
      </form>
      <div (click)="addItem()">Add new</div>

TS

  demoForm: FormGroup;

  arrayItems: {
    parts: number;
    name: string;
    volume: string;
  }[];



ngOnInit(): void {
    this.arrayItems = [{
      parts: 11,
      name: 'Naslov',
      volume: '120'
    }];
    this.demoForm = this.formBuilder.group({
      demoArray: new FormArray([])
    });
  }

  get demoArray() {
    return this.demoForm.get('demoArray') as FormArray;
  }

  addItem() {
    const item = {
      parts: 11,
      name: 'Naslov2',
      volume: '120'
    };
    this.arrayItems.push(item);
    this.demoArray.push(this.formBuilder.control(false));
  }

  removeItem(index) {
    this.arrayItems.splice(index, 1);
    this.demoArray.removeAt(this.demoArray.length - 1);
  }
  submit() {
    console.log(this.demoForm.value);
  }

I made it much simpler that everybody can understand and to help me find the problem, thanks

Answer 1

You can use addControl('control_name', new FormControl('')) method to add a new control or form group dynamically to your form like below:

this.form = new FormGroup({
    name: new FormControl('', [Validators.required]);
});

To add a FormGroup dynamically with validation use:

this.form.addControl('address', new FormGroup({
    city: new FormControl('', [Validators.required]),
    state: new FormControl('', [Validators.required]),
    country: new FormControl('', [Validators.required])
}));

To add a FormArray dynamically with validation use:

this.form.addControl('address', new FormArray([
     new FormGroup({
        city: new FormControl('', [Validators.required]),
        state: new FormControl('', [Validators.required]),
        country: new FormControl('', [Validators.required])
    })
]));

Your HTML template for FormArray example

<form [formGroup]="form">
    <div formArrayName="address">
        <ng-container *ngFor="let group of form.address.controls; let i = index" [formGroupName]="i">
            <input type="text" formControlName="city" placeholder="city" />
            <input type="text" formControlName="state" placeholder="state" />
            <input type="text" formControlName="country" placeholder="Country" />
        </ng-container>
    </div>
</form>

Visit here to get more clarity to add/remove controls dynamically in Reactive Forms.

Answer 2

Replace[formControl]="arrayItems[i]" with [formControlName]="i", as demonstrated below:

<form [formGroup]="demoForm">
  <div formArrayName="demoArray">
    <input *ngFor="let arrayItem of arrayItems; let i = index" [formControlName]="i">
  </div>
</form>