2

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>
Community
  • 1
  • 1
Impromptu_Coder
  • 425
  • 3
  • 7
  • 27

1 Answers1

0

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!

AT82
  • 71,416
  • 24
  • 140
  • 167
  • Thanks a lot.It's working.But could you please tell me what does this for(let key in value)loop in .ts file do ? Does it run through all the values that we've mentioned in the HTML file ? – Impromptu_Coder Mar 17 '17 at 12:11
  • It loops the object and checks if the object created from the form has a value, e.g that catid has a value, if so, we add to counter `counter++`. Then we check the following field etc.... If you look at the plunker, you can see that upon submit I console the form values, so you can see that object that is created, which we loop through the values and see that at least two fields have values :) – AT82 Mar 17 '17 at 12:16
  • And since it solved your issue, please consider accepting the answer by clicking the grey tick under the voting of this answer, so that it can be helpful to others :) Here's how, if it's unclear :) https://meta.stackexchange.com/a/5235 – AT82 Mar 17 '17 at 12:18
  • So if the form is empty the form object looks like this: `{ texttype: "", selectid: "", catid: "", typeid: "" }` – AT82 Mar 17 '17 at 12:20