使用嵌套的TypeScript模型對象的Angular2反應形式

Question

我想在我的應用程序中使用角2模型驅動的形式，但如果我有嵌套的對象（具有空值）我不能使其按需要工作。

這裏是我的代碼：

person.model.ts（這是地址爲嵌套對象Person模型對象）

export class Address{ 
    addressId: string; 
    street: string 
    city: string; 
    state: string; 
    zip: string 
} 

人

import {Address} from './address.model'; 
export class Person{ 
    personId: string; 
    name: string 
    age: number; 
    address: Address; 
} 

address.model.ts .component.ts

@Component({ 
selector: 'app-person', 
templateUrl: 'person.component.html' 
}) 
export class PersonComponent implements OnInit { 
personForm: FormGroup; 
person: Person; 

constructor(private someService: PersonService, private formBuilder: FormBuilder) {}  

ngOnInit(){ 
    this.someService.getPersonCall(personId) 
     .subscribe (person => { 
      this.person = person; 
      this.buildForm(); 
     } 
}; 

buildForm(): void { 
    this.personForm = this.formBuilder.group ({ 
     'name': [this.person.name, [Validator.required]], 
     'age': [this.person.age], 
     'street': [this.person.address.streetOne], 
     'city': [this.person.address.streetOne], 
     'state': [this.person.address.state], 
     'zip': [this.person.address.zip], 

    }); 
    this.registerForChanges(); 
} 

registerForChanges(): void { 
    this.personForm.get('name').valueChanges.subscribe(value => this.person.name=value); 
    this.personForm.get('age').valueChanges.subscribe(value => this.person.age=value); 
    this.personForm.get('street').valueChanges.subscribe(value => this.person.address.streetOne=value); 
    this.personForm.get('city').valueChanges.subscribe(value => this.person.address.city=value); 
    this.personForm.get('state').valueChanges.subscribe(value => this.person.address.state=value); 
    this.personForm.get('zip').valueChanges.subscribe(value => this.person.address.zip=value); 
} 


onSubmit() { 
    this.someService.update(this.person).subscribe(response => 
    this.person = response); 
} 

這是我person.component.html

<form *ngIf="person" (ngSubmit)="onSubmit()" [formGroup]="personForm" 
      novalidate> 
    <div class="col-md-6"> 
     <div class="form-group"> 
      <label for="nameId">Name</label> 
      <input type="text" class="form-control" formControlName="name" id="nameId"/>  
     </div> 
     <div class="form-group"> 
      <label for="ageId">Age</label> 
      <input type="number" class="form-control" formControlName="age" id="ageId"/>  
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="form-group"> 
      <label for="streetId">Street</label> 
      <input type="text" class="form-control" formControlName="street" id="streetId"/>  
     </div> 
     <div class="form-group"> 
      <label for="cityId">City</label> 
      <input type="text" class="form-control" formControlName="city" id="cityId"/>  
     </div> 
     <div class="form-group"> 
      <label for="stateId">State</label> 
      <input type="text" class="form-control" formControlName="state" id="stateId"/>  
     </div> 
     <div class="form-group"> 
      <label for="zipId">Zip</label> 
      <input type="text" class="form-control" formControlName="zip" id="zipId"/>  
     </div> 
    </div> 

    <button type="submit" [disabled]="!personForm.valid">Save </button> 

</form> 

我嘗試更新，我從服務調用填充Person對象，但是當我檢索到的人物對象的人對象對地址屬性的空值它在buildForm函數中打破了我的代碼。

我試過幾個其他的方式，但不能使它工作

版本＃2

buildForm(): void { 
if (!this.person.address) { 
    this.personForm = this.formBuilder.group ({ 
     'name': [this.person.name, [Validator.required]], 
     'age': [this.person.age], 
     'street': [''], 
     'city': [''], 
     'state': [''], 
     'zip': [''], 

    }); 
} else { 
    this.personForm = this.formBuilder.group ({ 
     'name': [this.person.name, [Validator.required]], 
     'age': [this.person.age], 
     'street': [this.person.address.streetOne], 
     'city': [this.person.address.streetOne], 
     'state': [this.person.address.state], 
     'zip': [this.person.address.zip], 

    }); 
} 

    this.registerForChanges(); 
} 

隨着這一變化，我能夠呈現形式，無任何錯誤，但是當我嘗試更新registerForChanges函數中失敗的地址字段。

＃3型

registerForChanges(): void { 

if (! person.address) { 
    person.address = new Address();  
this.personForm.get('name').valueChanges.subscribe(value => this.person.name=value); 
this.personForm.get('age').valueChanges.subscribe(value => this.person.age=value); 
this.personForm.get('street').valueChanges.subscribe(value => this.person.address.streetOne=value); 
this.personForm.get('city').valueChanges.subscribe(value => this.person.address.city=value); 
this.personForm.get('state').valueChanges.subscribe(value => this.person.address.state=value); 
this.personForm.get('zip').valueChanges.subscribe(value => this.person.address.zip=value); 
} 

這種變化我最終加入空記錄的地址表，當我保存表單不改變地址字段後。

如果該函數的地址屬性不爲空，則此代碼正常工作。

有人可以幫我做這個代碼工作

plunker link

Answer 1

如果我明白你的問題很好，address是可選的。有兩種情況要涵蓋：

1. 沒有address（這是null）當窗體加載，如果沒有被添加到address值（Street，City，State或Zip），你想要它留null時保存點擊

2. 沒有address（這是null）當窗體加載如果事情被添加到address VALU ES（Street，City，State或Zip，要保存這些值

可以實現像這樣 - 在buildForm()功能，檢查是否this.person.address等於null。如果是的話，創造新的Address：

buildForm(): void { 

     if (!this.person.address) { 
     this.person.address = new Address(); 
     } 
    } 

這將防止當您創建表單時address是null在出現的錯誤。下一步是創建一個將用於onSubmit()函數的函數，以檢查this.person.address值是否仍然是null或''（空字符串）。如果是，則函數會將this.person.address設置爲null，並且您不會保存空的Address對象，而是仍然是null。如果它不是null，它將爲插入的值保存Address對象。讓我們來調用該函數checkAddress()：

checkAddress(): void { 
    if (this.person.address.street == null | this.person.address.street == '' && 
     this.person.address.city == null | this.person.address.city == '' && 
     this.person.address.state == null | this.person.address.state == '' && 
     this.person.address.zip == null | this.person.address.zip == '') { 
     this.person.address = null; 
     } 
} 

最後，你需要調用函數checkAddress在功能onSubmit()：

onSubmit() { 
    console.log('On Save') 
    this.checkAddress(); 
    console.log(this.person); 
    console.log(this.person.address); 
} 

這裏的working Plunker。

注 - 我加了下面的「保存」的代碼下面的代碼onSubmit()功能，防止錯誤，如果你第一次點擊保存空值，然後嘗試插入一些值：

if (!this.person.address) { 
    this.person.address = new Address(); 
} 

希望這幫助。乾杯。