How to access input fields of injected form component

问题

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

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

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>
(...)

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.

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

回答1:

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

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

In your SignupPage class,declare searchMap as

@ViewChild(SearchMap)
searchMap: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)

Check here for more

来源：https://stackoverflow.com/questions/41090425/how-to-access-input-fields-of-injected-form-component

标签

ionic2

components

formbuilder