Angular2,Ionic2: How to navigate to next page only when user selects atleast 2 of the 4 fields?

I'm currently developing an app in which the home page consists of set of options which the user has to select.The options are 3 dropdown lists with different data in each of them and one text field.At the bottom of the page I've a button when clicked navigates to the next page.But I want the navigation to be done only when the user enters/selects something from 2 of the 4 available fields.

I read about [disabled] function for the button.But in my case I want the button to be enabled only but still the navigation shouldn't work.

I referred this How do I enable a submit button if 1 or more checkboxes are checked? But for me the fields are made individually without using a ngFor. And I want the submit button to be enabled always.

Right now this is my html page without any restrictions:

<ion-header>
  <ion-navbar>
     <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>
  <ion-content>
    <br>
    <ion-item>
      <ion-input type="text" value="" placeholder="Enter Keyword" [(ngModel)]="textype"> </ion-input>
    </ion-item>
  <ion-item>
  <ion-label>Country</ion-label>
    <ion-select (ionChange)="onSelect(selectid)" [(ngModel)]="selectid">
      <ion-option *ngFor="let selectid of countryData" [value]="selectid">
        {{selectid.name}}
      </ion-option>
    </ion-select>
  </ion-item>

   <!--<ion-item *ngIf="compData">-->
     <ion-item>
  <ion-label>State</ion-label>
  <ion-select [(ngModel)]="catid">
      <ion-option *ngFor="let catid of stateData" [value]=catid>
        {{catid.name}}
      </ion-option>
    </ion-select>
  </ion-item>

<ion-item>
  <ion-label>
    Type of Vehicle
  </ion-label>
    <ion-select [(ngModel)]="typeid">
      <ion-option *ngFor="let typeid of vehicles">
        {{typeid}}
      </ion-option>
    </ion-select>
  </ion-item>
<br>
  <button type="submit" (Click)= "searchform" ion-button full > Search </button>

 </ion-content>

I would actually do a spin-off of the link you provided. Since it seems you have some kind of a form, we can make use of it and look at the object that is created for the form, and see that a minimum of 2 fields need to be filled. In this case, be something else than an empty string.

Since you have a form, you don't actually need the two-way-binding, but if you want, you can of course keep it. But what you need is the form tag and name attributes for your fields, and for your submit button you need to pass the form value. So your shortened template could look like this:

<form #myForm="ngForm" (ngSubmit)="submit(myForm.value)">
  <ion-item>
    <ion-input type="text" value="" placeholder="Enter Keyword" name="texttype" ngModel> </ion-input>
  </ion-item>
 <ion-item>
    <ion-label>Country</ion-label>
    <ion-select name="selectid" ngModel>
      <ion-option *ngFor="let selectid of countryData" [value]="selectid.name">
    {{selectid.name}}
      </ion-option>
    </ion-select>
 <ion-item>
 <button type="submit" ion-button full > Search </button>

And then your submit-function, loop through the object and use a counter. If the counter then equals 2 or more, navigate to page of your choosing, else do what you want.

counter = 0;

submit(value) {
   for(let key in value) {
     if(value[key] != '') {
       this.counter++;
     }
   }
   if(this.counter >= 2) {
     // valid, navigate to other page
   }
   else {
     // not valid, do something else
   }
}

Here's a demo!