角度2反応型入れ子になったグループがリセットスローエラー

Question

に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'を読み取ることができません。私の期待どおりの結果は、すべての領域の値がnullになります。私はこの問題を避けることができますか？すべてのネストされたモデルはnullと私のサーバーの応答彼らはすべてのNULL

Answer 1

ているとき、私はこのような何かを行うことをお勧め：

area.model.ts

export class Area { 
id: string; 
} 

data.model.ts

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

を

form.model.ts

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

データ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); 
    }); 
} 

Answer 2

私はこのためのシンプルなクリーンな解決策があるとは思いません。オブジェクトのプロパティを反復して値を手動で設定する必要があります。したがって、このような何か：

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

をし、あなたがデータを受信したときAreaがnullの場合はそう、そのformgroupにnullにformcontrolsを設定する場合は、まず、確認してください。そうでない場合は、ごformgroupにあなたがバックエンドから取得した値を設定する：あなたはモデルとフォームのリセット方法

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] 
    }) 
    } 
} 

DEMO