Angular2，Ionic2:仅当用户选择4个字段中的2个2时，如何导航到下一页

Question

我目前正在开发一个应用程序，其中主页由用户必须选择的选项组成。选项是3个下拉列表，其中每个都有不同的数据，一个文本字段。在页面的底部，当单击导航到下一页时，我有一个按钮。但是，我希望仅在用户输入/从4个可用字段中的两个中选择某些东西才能进行导航。

我阅读了有关按钮的[禁用]函数。

我转介了此，如果检查了1个或更多复选框，该如何启用提交按钮？但是对我来说，这些字段是单独制造的，而无需使用NGFOR。我希望始终启用提交按钮。

现在，这是我的HTML页面，没有任何限制：

<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>

Answer 1

我实际上会进行您提供的链接的衍生。由于您似乎有某种形式，因此我们可以使用它并查看为表单创建的对象，并看到至少需要填充2个字段。在这种情况下，除了一个空字符串外。

由于您有表格，因此您实际上不需要双向绑定，但是如果愿意，您当然可以保留它。但是您需要的是字段的form标签和name属性，对于提交按钮，您需要传递表单值。因此，您的缩短模板看起来像这样：

<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>

然后您的提交功能，循环穿过对象并使用计数器。如果计数器等于2或更多，请导航到选择的页面，否则请执行您想要的。

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
   }
}

这是演示！