Errors don't show on array fields

[ONbik-srebollo]

Hi.

I've a form with an array of forms. For example:

    this.formGroup = this.formBuilder.group({
      'field1': [null, Validators.required],
      'field2': this.formBuilder.array([]),
    });

Field2 is a form group with some fields required. The form is not submit because some fields on Field2 are not valid, but no message is shown, nor fields are marked with has-error class.

Documentation.
Documentation example.

[ONbik-srebollo]

Hi.

In the directive, I think that this works (I've done some tests on compiled code):

  markAsTouchedAndDirty(formGroup: FormGroup) {
    Object.keys(formGroup.controls).forEach(key => {
      const control = formGroup.controls[key];
      if (control instanceof FormGroup) {
        this.markAsTouchedAndDirty(control as FormGroup);
      } else if (control instanceof FormArray) {
        for (const ctrl of control.controls) {
          this.markAsTouchedAndDirty(ctrl as FormGroup);
        }
      } else if (control.enabled) {
        control.markAsDirty();
        control.markAsTouched();
        control.updateValueAndValidity();
      }
    });
  }

Can you test it, please? I'm not expert on angular components and testing... Sorry for the inconvenience.

[third774]

Interesting. Could you please fork that example and add some example validation?

[ONbik-srebollo]

I'm very busy but I'll try ASAP.

[third774]

This should be addressed in the release candidate thanks to PR #47 from @kingcody. Please try it out by installing with

npm i ng-bootstrap-form-validation@next and let me know if there are any issues!

Thanks for reporting this!

[ONbik-srebollo]

Hi.

I can't install it, I'm on angular v5 yet. It's posiible to commit this to v5 branch?

Thanks in advance.