3

アプリケーションでAngular 2モデル駆動型フォームを使用しようとしていますが、ネストされたオブジェクト(null値を持つ)がある場合、期待どおりに機能させることができません。

これが私のコードです：

person.model.ts (これはネストされたオブジェクトとしてアドレスを持つ Person モデル オブジェクトです)

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
}

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

サービス呼び出しから入力した人物オブジェクトを更新しようとしていますが、人物オブジェクトを取得すると、人物オブジェクトの address プロパティに 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);
}

この変更の後、住所フィールドを変更せずにフォームを保存すると、空のレコードが住所テーブルに追加されてしまいます。

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

誰かがこのコードを機能させるのを手伝ってくれますか

プランカーリンク

4

1 に答える 1

1

あなたの問題をよく理解していれば、addressオプションです。対象とするシナリオは 2 つあります。

  1. フォームがロードされたときに値 ( address、、または)にnull何も追加されていない場合は、[保存]をクリックしたときにそのままにしておきます。addressStreetCityStateZipnull

  2. フォームがロードされたときに何もありませんaddress(それはnull)、値に何かが追加されたaddress場合 ( Street、City、StateまたはZip、それらの値を保存したい場合)

あなたはこのようにそれを達成することができます -buildForm()関数で、this.person.addressが と等しいかどうかを確認してくださいnull。そうである場合は、 new を作成しますAddress。

    buildForm(): void {

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

addressこれにより、 isのときにフォームを作成するときに発生するエラーが防止されますnull。次のステップは、関数で使用される関数を作成して、値がまだor (空の文字列)であるonSubmit()かどうかを確認することです。そうである場合、関数は に設定され、空のオブジェクトは保存されませんが、代わりに保存されます。そうでない場合は、挿入された値でオブジェクトを保存します。その関数を呼び出しましょう:this.person.addressnull''this.person.addressnullAddressnullnullAddresscheckAddress()

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そして最後に、 functionで functionを呼び出す必要がありますonSubmit():

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

これが動作中の Plunkerです。

注 - 関数の「保存」コードの下に次のコードを追加して、最初に空の値で保存onSubmit()をクリックしてから値を挿入しようとした場合にエラーが発生しないようにしました。

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

お役に立てれば。乾杯。

于 2016-10-25T16:57:19.343 に答える