javascript - FormArray 无效但不包含错误

Question

我在 Angular 6 中使用了响应式(Reactive)形式。这种响应式(Reactive)形式包含一个名为 instruments 的 FormGroup，它是一个 FormArray。

我收到表单数组无效的信息，但数组的所有组件都是有效。

有什么问题？

初始化表单

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 函数

 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

请看stackblitz-demo .我将从以下内容开始，然后如果看到这已经解决了错误。

您有以下内容:

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

缺少将映射的仪器变成表单数组内的表单控件。在我的示例中，我有这个:

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

对于您来说，您需要弄清楚预处理，然后将其传递到组中的映射结果中。

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));