forms - Angular 2 Reactive Form嵌套组在重置抛出错误时传递了null

Question

我有这个表单组：

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

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

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

区域空值抛出异常“TypeError：无法读取空属性'Id'”。我的预期结果是所有区域值都变为空。我可以避免这个问题吗？当它们全部为空时，我的所有嵌套模型都为空的服务器响应

Answer 1

我不认为有一个简单的干净的解决方案。您需要迭代对象属性并手动设置值。所以是这样的：

resetVal = {Id:1, Nominativo: 'Test', Area: null }

当您收到数据时，您首先检查是否Area为空，如果是，则将表单控件设置为该表单组null中。如果没有，则将从后端获得的值设置为表单组：

this.areaCtrl = this.myForm.controls.Area as FormGroup;

this.myForm.patchValue({
  Id: this.resetVal.Id,
  Nominativo: this.resetVal.Nominativo,
}) 
if(this.resetVal.Area === null) {
  this.areaCtrl.patchValue({
    Id: null
  })
}
else {
  for(let a in this.resetVal.Area) {
    this.areaCtrl.patchValue({         
      [a]:this.resetVal.Area[a]
    })
  }
}

演示

Answer 2

我建议做这样的事情：

area.model.ts

export class Area {
 id: string;
}

数据模型.ts

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

form.model.ts

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

数据模型.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);
    });
}