ネストしたTypeScriptモデルオブジェクトでAngular2反応形式を使用する

Question

アプリケーションで角度2のモデル駆動型を使用しようとしていますが、ネストされたオブジェクト（null値）を使用すると、ここで

は私のコードは次のとおりです。

person.model.ts（これは、ネストされたオブジェクトなどのアドレスを持つ人物モデルオブジェクトである）

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

address.model.ts

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

人.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> 

私は、サービスコールから移入人物オブジェクトを更新しようとしていますが、私は、検索時に、人が人オブジェクトは、アドレスプロパティにnull値を持つオブジェクトでありますそれは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); 
} 

私はアドレスフィールドを変更せずにフォームを保存するとき、アドレステーブルに空のレコードを追加してしまいます。

このコードは、関数のaddressプロパティがnullでない場合に問題なく動作します。

誰かが私はよくあなたの問題を理解している場合、私はこのコードの動作

plunker link

Answer 1

を作るのを助けることができ、addressはオプションです。あなたがカバーしたい2つのシナリオがあります。

1. 何addressはありません（それはnullだ）フォームがロードされ、何もaddress値（Street、City、StateまたはZip）に追加されていない場合、あなたはそれをしたいときフォームがロードされたときや何かがaddress VALUに追加された場合保存が（それはnullだ）何addressはありません

2. をクリックしたときにnull滞在しますbuildForm()機能で、this.person.addressはnullに等しいかどうかを確認 - ES（Street、City、StateまたはZipは、あなたはこのようにそれを達成することができ、それらの値

を保存したいです。それがある場合、新しいAddressを作成します。

buildForm(): void { 

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

これはaddressがnullあるときに、フォームを作成するときに起動したエラーを防ぐことができます。次のステップでは、の関数で、this.person.addressの値がまだnullまたは''（空の文字列）であるかどうかをチェックする関数を作成します。その場合、関数はthis.person.addressをnullに設定し、空のAddressオブジェクトは保存しません。代わりにnullのままです。 nullでない場合は、値を挿入したAddressオブジェクトを保存します。

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; 
     } 
} 

そして最後に、あなたが機能onSubmit()で機能checkAddressを呼び出す必要があります：のは、その関数checkAddress()を呼ぶことにしましょう

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(); 
} 

・ホープ、この助けてください。乾杯。