如何访问注入表单组件的输入字段 [英] How to access input fields of injected form component

问题描述

我将带有输入表单的组件注入到ionic2表单中，两者都是用formBuilder创建的。

I inject a component with an input form into a ionic2 form, both created with formBuilder.

来自地址输入组件（search-map.ts）：

From the address input component (search-map.ts):

@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: [""],
    });
(...)

插入基本表单的HTML（signup.html ）：

Inserted into the HTML of the base form (signup.html):

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

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

来自基本表格（signup.ts）

From the base form (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('^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[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],
    });
}

编辑和更改事件两者都正常。

Edit and change events are working fine on both.

如何从signup.ts文件（class signupPage）中读取国家和邮政编码输入字段？

How can I read the country and postcode input fields from signup.ts file (class signupPage)?

推荐答案

在您设置搜索地图的html中，执行以下操作：

In your html where you set search-map,do this:

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

在您的SignupPage类中，将searchMap声明为

In your SignupPage class,declare searchMap as

@ViewChild(SearchMap)
searchMap:SearchMap;

这样您就可以访问父项中的子组件以及子项的所有公共属性。 （您可能必须使searchMapForm成为searchmap类的公共属性）

this way you can access the child component in the parent and all of the public properties of the child.(You may have to make searchMapForm a public property of searchmap class)

检查这里有更多信息

这篇关于如何访问注入表单组件的输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！