如何访问注入表单组件的输入字段

Question

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

来自地址输入组件（搜索-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: [""],
    });
(...)

插入基本形式(signup.html)的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)

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],
    });
}

编辑和更改事件在两者上都运行良好。

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

Answer 1

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

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

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

@ViewChild(SearchMap)
searchMap:SearchMap;

这样您就可以访问父组件中的子组件以及子组件的所有 public 属性。（您可能必须将 searchMapForm 设为 public 属性 of searchmap class)

勾选here for more

如何访问注入表单组件的输入字段

How to access input fields of injected form component

components

formbuilder

ionic2