我在 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]],
})
});
最佳答案
请看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));
关于javascript - FormArray 无效但不包含错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52538971/