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

Please read the docs, your .html don't work to control a FormArray. If you want you can also check this SO: stackoverflow.com/questions/63541082/… to know the diference when we using a FormArray of FormControls or a FormArray of FormGroup — Eliseo
– Eliseo, Commented Aug 27, 2020 at 7:15
@Eliseo what do you mean .html doesn't work? what makes you thinks so? — Rafi Henig
– Rafi Henig, Commented Aug 27, 2020 at 7:28
@RafiHenig, in your answer it's NOT [formArrayName]="i", it's [formGroupName]="i" — Eliseo
– Eliseo, Commented Aug 27, 2020 at 7:30
@Eliseo why [formGroupName]="i"?, the array of is of type FormControl rather than FormGroup – — Rafi Henig
– Rafi Henig, Commented Aug 27, 2020 at 7:30

Yogendra Chauhan · Accepted Answer · 2020-08-28 05:37:05Z

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.

edited Aug 28, 2020 at 5:37

answered Aug 27, 2020 at 6:56

Yogendra Chauhan

8255 silver badges15 bronze badges

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

2 Comments

Rafi Henig Over a year ago

How does it answer the question?

Yogendra Chauhan Over a year ago

@RafiHenig Your question is add dynamic FormArray with validation, so i answered that you can add any control dynamically using addControl method. you can add FormArray with Validation like this:

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

Rafi Henig · Accepted Answer · 2020-08-27 11:42:53Z

0

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>

edited Aug 27, 2020 at 11:42

answered Aug 27, 2020 at 7:05

Rafi Henig

6,4502 gold badges22 silver badges41 bronze badges

Collectives™ on Stack Overflow

Add dynamic formArray angular with validation

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related