Angular FormArray invalid not marks form as invalid

Question

I have a form in which one of the controls is a formArray of formGroups. I set custom validators to some controls inside the formGroups. The validators works fine and if I check the validity status of the formArray when some of the controls is invalid the formArray is invalid too. But the problem is that although the formArray has status invalid the form has status valid.

Is like the form is ignoring the status of the formArray control.

This is the way it works?

scy scy · Accepted Answer · 2020-10-06T14:39:01

From what I know, the FormArray does evaluate its child groups, it just doesn't get informed on an update or validity change. But you can do that by hand by for example propagating the FormGroups change event onto the array.

just an untested sketch, but it should be something like this.

const formGroup1: FormGroup = this._formBuilder.group({
  element: [null, [Validators.required]],
});

const formArray: FormArray = this._formBuilder.array([
  formGroup1
]);

// the controls should be an array of formGroups here.
const valueSubscription: Subscription = this.formArray.controls[0].valueChanges.subscribe(() => { 
  this.formArray.updateValueAndValidity();
}

Angular FormArray invalid not marks form as invalid

1 Answers