Angular formGroup inside formArray, formGroup is invalid, but `formArray.valid` is true

Question

this is my primary code:

get emailFormArray() {
  return this.formGroup.get("emails") as FormArray;
}

public ngOnInit() {
  this.formGroup = this.formBuilder.group({
    emails: this.formBuilder.array([]),
  });
  this.addEmailFormGroup();
}

public addEmailFormGroup() {
  this.emailFormArray.controls.push(
    this.formBuilder.group({
      email: ['', Validators.email],
    }),
  );
}

and in my template

{{ formGroup.valid }}
{{ emailFormArray.valid }}
<ng-container *ngFor="let email of emailFormArray.controls">
  {{ email.valid }}
  {{ email.get('email').valid }}
</ng-container>

When I input a invalid email, the result in template is true true false false, why the formGroup and emailFormArray is valid? Thank you!

Off Topic - You can omit public from public ngOnInit

Pardeep Jain
– Pardeep Jain

2019-11-09 12:54:01 +00:00
Commented Nov 9, 2019 at 12:54 — Pardeep Jain
– Pardeep Jain, Commented Nov 9, 2019 at 12:54
Yes thank yout, but I prefer this code style

鸿则_
– 鸿则_

2019-11-11 06:35:23 +00:00
Commented Nov 11, 2019 at 6:35 — 鸿则_
– 鸿则_, Commented Nov 11, 2019 at 6:35

鸿则_ · Accepted Answer · 2019-11-09 12:51:58Z

15

I found the reason. I should use this.emailFormArray.push instead of this.emailFormArray.controls.push

answered Nov 9, 2019 at 12:51

鸿则_

3522 silver badges14 bronze badges

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

1 Comment

Pardeep Jain Over a year ago

Even I was about to post to the same answer :)

Hien Nguyen · Accepted Answer · 2021-07-29 05:12:34Z

I faced the same issue when load data from database and update data, it did not keep validation rule. The problem that I set direct value to form control as

loadSlideItemFromDB(slideShowItem): FormArray {
    const formArray = new FormArray([]);
    slideShowItem.forEach(item => {
      formArray.push(this.fb.group({
        id: item.Id,
        slideShowId: item.SlideShowId,
        pageType: item.PageType,
        linkUrl: item.LinkUrl,
        pageTitle: item.PageTitle
      }))
    });

    return formArray;
  }

After refactoring code, I create form array with validation rule first and then patchValue for it.

I share this for whom concerned.

loadSlideItemFromDB(slideShowItem): FormArray {
    const formArray = new FormArray([]);
    slideShowItem.forEach(item => {
      let group = this.fb.group({
        id: [''],
        slideShowId: [''],      
        pageType: ['1', Validators.required],
        linkUrl: ['', Validators.required],
        pageTitle: ['']
      })
      group.patchValue({
        id: item.Id,
        slideShowId: item.SlideShowId,
        pageType: item.PageType,
        linkUrl: item.LinkUrl,
        pageTitle: item.PageTitle
      });
      formArray.push(group);
    });

    return formArray;
  }

Collectives™ on Stack Overflow

Angular formGroup inside formArray, formGroup is invalid, but `formArray.valid` is true

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related