Validation reactive form with formarray

Question

I am using angular 2. I need validation form reactive form with formArray.

Here is my form.

this.addbookingForm = this.fb.group({
      FROM: ['', Validators.required],
      ITEMS: this.fb.array([this.initItems()]),

})

 initItems() {        
    const group = this.fb.group({           
          NAME: [''],
          NO_OF_ITEMS: ['',Validators.required],
          PRICE: [''],
          WEIGHT: [''],
          TOTAL: ['']                     
    });
    return group;
}

Here is my form.

<form [formGroup]="addbookingForm" role="form" (ngSubmit)="onSubmit(addbookingForm.value)"  novalidate>

    <div formArrayName="ITEMS" class="form-group row">
         <div class="form-group col-sm-2">
                <label class="form-label">No of Items</label>
                <input type="text" pattern="^[0-9]*$" class="form-control" tabindex="7" formControlName="NO_OF_ITEMS" (change)="onChange(ITEMS.controls.value.NO_OF_ITEMS)">
                <p class="err" danger padding-left *ngIf="(!addbookingForm.controls.ITEMS.controls.NO_OF_ITEMS.valid)">Invalid number of items</p>
        </div>
    </div> 
</form>

But i am getting this error message

ERROR TypeError: Cannot read property 'valid' of undefined

How can i fix this issue?

What is the in in ITEMS.controls[in]? This template throws the error Cannot find control with path: 'ITEMS -> NO_OF_ITEMS' Please post correct code — yurzui
– yurzui, Commented Oct 21, 2017 at 4:59
When working with FormArray you should use index to access to control. — yurzui
– yurzui, Commented Oct 21, 2017 at 5:03
Look how it should be stackblitz.com/edit/… This answer may also help you to work with FormArray in the right way stackoverflow.com/questions/42783400/… — yurzui
– yurzui, Commented Oct 21, 2017 at 5:08

Michal · Accepted Answer · 2018-11-28 11:05:16Z

0

change your code like below

<p class="err" danger padding-left 
    *ngIf="(!addbookingForm.controls.ITEMS.controls[0].controls.NO_OF_ITEMS.valid)">
Invalid number of items</p>

edited Nov 28, 2018 at 11:05

Michal

2,31326 silver badges40 bronze badges

answered Nov 28, 2018 at 10:09

Dharan

2622 silver badges15 bronze badges

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

1 Comment

Michal Over a year ago

You can improve your answer by editing it and adding explanation on how your suggestion works - how it solves the problem stated in the question.

Collectives™ on Stack Overflow

Validation reactive form with formarray

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related