web-dev-qa-db-ja.com

FormBuilderでネストされたオブジェクトを使用する

だから私はこのフォームを持っています、そしてそれはうまくいきます..しかし今私はjson構造をいくつか拡張したいと思います...

https://plnkr.co/edit/aYaYTBRHekHzyS0M7HDM?p=preview

使用したい新しい構造は次のようになります（アドレスのみ：変更されました）：

  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(5)]],
  address: this.fb.array([{
    name: '',
    addressLine1: ['', [Validators.required]],
    city: ['', [Validators.required]],
    postalCode: [Validators.required],
  }]),

しかし、「ERROR TypeError：control.registerOnChangeは関数ではありません」などのエラーが発生し続けます。これはformControlNameが欠落していることに関係していることがわかりましたが、すべてのデータを表示したくありません。

入力フィールドに、addressLine1のみを表示します（名前、都市、または郵便番号はまったく表示しません）。

formsangularangular2-formbuilder
6
Mackelito

addressにはformarrayの代わりにフォームグループを使用するので、代わりに次のようになります。

this.registrationForm = fb.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(5)]],
  address: this.fb.group({ // make a nested group
    name: '',
    addressLine1: ['', [Validators.required]],
    city: ['', [Validators.required]],
    postalCode: [Validators.required],
  }),
});

次に、テンプレートで、formGroupNameをマークすることを忘れないでください。

<md-input-container formGroupName="address"> <!-- Mark the nested formgroup name -->
   <input mdInput type="text" placeholder="AddressLine1" name="address" 
         formControlName="addressLine1" fodiGoogleplace 
         (updateAdress)="setAdressOnChange($event)">
</md-input-container>

あなたのフォーク[〜＃〜]プランカー[〜＃〜]

18
AJT82