FormArray is invalid but does not contains errors

Question

I use a reactive form in angular 6. This reactive form contains a FormGroup called instruments which is a FormArray.

I received the information that form array is invalid but all the array's components are valid.

What's the issue ?

Initialising the form

initializeForm(laboratory) {
    this.laboratoryForm = this.formBuilder.group({
      laboratoryId: [laboratory && laboratory.Id],
      clientId: [this.currentUserClientId],
      name: [laboratory && laboratory.Name, [Validators.required, Validators.maxLength(50)]],
      code: [laboratory && laboratory.Code, [Validators.required, Validators.maxLength(5)]],
      description: [laboratory && laboratory.Description, [Validators.required, Validators.maxLength(1000)]]
    });
    if (laboratory && laboratory.LaboratoryInfoSystem) {
      let laboratoryInfoSystemFormGroup = this.formBuilder.group({
        id: [laboratory.LaboratoryInfoSystem.Id],
        description: [laboratory.LaboratoryInfoSystem.Description, [Validators.maxLength(1000)]],
        model: [laboratory.LaboratoryInfoSystem.Model, [Validators.required, Validators.maxLength(50)]],
        name: [laboratory.LaboratoryInfoSystem.Name, [Validators.required, Validators.maxLength(50)]],
        lis_connection: this.formBuilder.group({
          id: [laboratory.LaboratoryInfoSystem.LaboratoryInfoSystemConnection.id],
          connection: [laboratory.LaboratoryInfoSystem.LaboratoryInfoSystemConnection.Connection, [Validators.required, Validators.maxLength(1000)]],
          connectionTypeId: [laboratory.LaboratoryInfoSystem.LaboratoryInfoSystemConnection.ConnectionTypeId, [Validators.required]],
          username: [laboratory.LaboratoryInfoSystem.LaboratoryInfoSystemConnection.Username, [Validators.maxLength(100)]],
          password: [laboratory.LaboratoryInfoSystem.LaboratoryInfoSystemConnection.Password, [Validators.maxLength(100)]]
        })
      });
      this.laboratoryForm.addControl('laboratoryInfoSystem', laboratoryInfoSystemFormGroup);
    }

    if (laboratory && laboratory.Instruments) {
      let formInstrumentsArray = laboratory.Instruments.map(function (instrument) {
        return this.getInstrumentForm(instrument.Model, instrument.Name, instrument.Description, instrument.InstrumentConnection);
      }.bind(this));
      this.laboratoryForm.addControl('instruments', this.formBuilder.array(formInstrumentsArray));
    }
  }

getInstrumentForm function

 getInstrumentForm(model, name, description, instrumentConnection): FormGroup {
return this.formBuilder.group({
  model: [model, [Validators.required, Validators.maxLength(50)]],
  name: [name, [Validators.required, Validators.maxLength(50)]],
  description: [description, [Validators.maxLength(1000)]],
  instrument_connection: this.formBuilder.group({
    id: [instrumentConnection && instrumentConnection.Id],
    connection: [instrumentConnection && instrumentConnection.Connection, [Validators.required, Validators.maxLength(1000)]],
    connectionTypeId: [instrumentConnection && instrumentConnection.ConnectionTypeId, [Validators.required]],
  })
});

}

Answer 1

Please take a look at the stackblitz-demo. I'd start with the following, then if see this has resolved the error.

You have the following:

let formInstrumentsArray = laboratory.Instruments.map(function(instrument) {
  return this.getInstrumentForm(instrument.Model, instrument.Name, instrument.Description, instrument.InstrumentConnection);
}.bind(this));

That is missing making the mapped instruments into a form control inside the form array. In my example I have this:

const toppingsFGs = toppings.map(topping => this.fb.group(topping));

For you, you'd need to figure out the preprocessing then pass it into the mapped result into the group.

let formInstrumentsArray = laboratory.Instruments.map(function(instrument) {
  return this.getInstrumentForm(instrument.Model, instrument.Name, instrument.Description, instrument.InstrumentConnection);
}.bind(this));


let final = formInstrumentsArray.map(instrument => this.fb.group(instrument));