Forms 角度2反应形式嵌套组在重置抛出错误时传递null

我有这个表格组：

Id: [null],
Nominativo: [null, [Validators.required, Validators.maxLength(100)]],
Area: fb.group({
    Id: [null]
})

当我尝试使用此模型重置表单时：

Id: 1,
Nominativo: 'Test'
Area: null

---

区域null值引发异常“TypeError:无法读取null的属性“Id”。我的预期结果是所有区域值都变为空。我可以避免这个问题吗？当所有嵌套模型都为空时，我的服务器响应为空。我建议这样做：

area.model.ts

export class Area {
 id: string;
}

export class DataModel {
 id: string;
 nominativo: string;
 area: Area;
}

data.model.ts

export class Area {
 id: string;
}

export class DataModel {
 id: string;
 nominativo: string;
 area: Area;
}

form.model.ts

export class FormModel {
 id: string;
 nominativo: string;
 area?: Area;
}

data-model.service.ts

@Injectable()
export class DataModelService {
  toFormModel(dataModel: DataModel): FormModel {
    const form: FormModel = new FormModel();
    form.id = dataModel.id;
    form.nominativo = dataModel.nominativo;
    if (dataModel.area) {
      form.area = dataModel.area;
    }
    return form;
 }
}

form.component.ts

constructor(dataModelService: DataModelService,
            dataApi: dataApiService,
            fb: FormBuilder) {
  this.form = this.fb.group({
    id: '',
    nominativo: '',
    area: this.fb.group({
      id: ''
    })
  });

  this.dataApi.getData()
    .map((data: DataModel) => this.dataModelService.toFormModel(data))
    .subscribe((formData) => {
       this.form.patchValue(formData);
    });
}

---

我建议这样做：

area.model.ts

export class Area {
 id: string;
}

export class DataModel {
 id: string;
 nominativo: string;
 area: Area;
}

data.model.ts

export class Area {
 id: string;
}

export class DataModel {
 id: string;
 nominativo: string;
 area: Area;
}

form.model.ts

export class FormModel {
 id: string;
 nominativo: string;
 area?: Area;
}

data-model.service.ts

@Injectable()
export class DataModelService {
  toFormModel(dataModel: DataModel): FormModel {
    const form: FormModel = new FormModel();
    form.id = dataModel.id;
    form.nominativo = dataModel.nominativo;
    if (dataModel.area) {
      form.area = dataModel.area;
    }
    return form;
 }
}

form.component.ts

constructor(dataModelService: DataModelService,
            dataApi: dataApiService,
            fb: FormBuilder) {
  this.form = this.fb.group({
    id: '',
    nominativo: '',
    area: this.fb.group({
      id: ''
    })
  });

  this.dataApi.getData()
    .map((data: DataModel) => this.dataModelService.toFormModel(data))
    .subscribe((formData) => {
       this.form.patchValue(formData);
    });
}

---

我不认为有一个简单的干净的解决办法。您需要迭代对象属性并手动设置值。比如说：

resetVal={Id:1，Nominativo:'Test'，区域：null}

当您收到数据时，首先检查

Area

是否为null，如果是，则在该formgroup中将formcontrols设置为

null

。如果不是，则将从后端获得的值设置为formgroup：

this.areaCtrl=this.myForm.controls.Area作为FormGroup；
this.myForm.patchValue({
Id:this.resetVal.Id，
NagnitVO:this.resetVal.NagnitVO，
}) 
if（this.resetVal.Area==null）{
此.areaCtrl.patchValue({
Id:null
})
}
否则{
for（让a进入此.resetVal.Area）{
此.areaCtrl.patchValue（{
[a] ：此.resetVal.Area[a]
})
}
}

---

我认为没有简单的清洁解决方案。您需要迭代对象属性并手动设置值。比如说：

resetVal={Id:1，Nominativo:'Test'，区域：null}

当您收到数据时，首先检查

Area

是否为null，如果是，则在该formgroup中将formcontrols设置为

null

。如果不是，则将从后端获得的值设置为formgroup：

this.areaCtrl=this.myForm.controls.Area作为FormGroup；
this.myForm.patchValue({
Id:this.resetVal.Id，
NagnitVO:this.resetVal.NagnitVO，
}) 
if（this.resetVal.Area==null）{
此.areaCtrl.patchValue({
Id:null
})
}
否则{
for（让a进入此.resetVal.Area）{
此.areaCtrl.patchValue（{
[a] ：此.resetVal.Area[a]
})
}
}

---

如何用model重置表单？我使用form.reset（model）。我尝试了form.patch（model）或form.setValue（model），但它们返回错误。您如何使用model重置表单还有一个悬而未决的问题？我使用form.reset（model）。我尝试了form.patch（model）或form.setValue（model），但它们返回错误。如果我用实例化的模型替换嵌套模型，这是一个悬而未决的问题，所有这些模型都可以正常工作（因为他可以访问Area.Id）但问题是webapi为嵌套模型返回空值，所以我需要一个不改变它们的解决方案。我认为最好的解决方案是写转换器，它将数据模型（从api返回）转换为表单模型。看一看：，首先您应该创建表单定义（ngOnInit），然后从api接收数据模型后，将其转换为表单模型定义并调用form.setValue（也在表单定义之后的ngOnInit中），问题是这是一个有效的模型（区域可以为null）。当对象为空时，我需要一些东西来告诉重置函数不要调用嵌套formGroup上的reset/setValue。如果我用实例化模型替换嵌套模型，所有这些都可以正常工作（因为他可以访问Area.Id）但问题是webapi为嵌套模型返回空值，所以我需要一个不改变它们的解决方案。我认为最好的解决方案是写转换器，它将数据模型（从api返回）转换为表单模型。看一看：，首先您应该创建表单定义（ngOnInit），然后从api接收数据模型后，将其转换为表单模型定义并调用form.setValue（也在表单定义之后的ngOnInit中），问题是这是一个有效的模型（区域可以为null）。我需要一些东西来告诉reset函数，当对象为null时，不要调用嵌套formGroup上的reset/setValue。