2016-12-11 6 views
1

入力フォームを持つコンポーネントをionic2フォームに挿入します。どちらもformBuilderで作成されます。注入フォームコンポーネントの入力フィールドにアクセスする方法

アドレス入力コンポーネント(検索map.ts)から:塩基形態(signup.html)のHTMLに挿入

@Component({ 
    selector: 'search-map', 
    templateUrl: 'search-map.html' 
}) 

@NgModule({ 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
}) 

export class SearchMap {   
    public searchMapForm = this.formBuilder.group({ 
     country: ["DE"], 
     postcode: ["", this.searchCont], 
     city: [""], 
    }); 
(...) 

(...) 
    <ion-item> 
     <ion-label floating>Password</ion-label> 
     <ion-input type="password" formControlName="password"></ion-input> 
    </ion-item> 

    <search-map></search-map> 
(...) 

ベースフォームから( signup.ts)

ionViewWillLoad() { 
    this.signup = this.formBuilder.group({ 
     name: [this.name, Validators.required], 
     fullname: [this.fullname, Validators.compose([Validators.required, Validators.pattern('^[\\w-äöüßÄÖÜ]+(\\s[\\w-äöüßÄÖÜ]+)+$')])], 
     email: [this.email, Validators.compose([Validators.required, Validators.pattern('^(([^<>()\\[\\]\\\\.,;:\\[email protected]"]+(\\.[^<>()\\[\\]\\\\.,;:\\[email protected]"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$')])], 
     password: ['', Validators.compose([Validators.required, Validators.minLength(8)])], 
     passwordRepeat: ['', this.passwordCompare], 
     address: [this.address, Validators.required], 
    }); 
} 

編集と変更の両方のイベントは正常に機能しています。

signup.tsファイル(class signupPage)から国および郵便番号入力フィールドを読み取るにはどうすればよいですか?あなたは、マップを検索し、あなたのHTML内

答えて

1

、次の操作を行います。

<search-map #searchMap></search-map> 

をごSignupPageクラスでは、

@ViewChild(SearchMap) 
searchMap:SearchMap; 

としてあなたが親に子コンポーネントにアクセスすることができ、このようにsearchMapを宣言(searchMapFormをsearchmapクラスのパブリックプロパティにする必要があるかもしれません)

チェックhere for more

+0

HTMLの#searchMapは必要ないと思われます。 – Michael

+0

これはsearch-mapタグのidであり、そのidはviewChildを持つコンポーネントでアクセス可能です。それ以外の場合、タグを見つけることはできません。 –

+0

sry .. html自体のコンポーネントを参照する必要がある場合は、通常は使用する必要はありません。 –

関連する問題