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

Question

我目前正在开发一个应用程序，其中主页包含用户必须选择的一组选项 select.The 选项是 3 个下拉列表，每个列表中都有不同的数据和一个文本 field.At 页面底部单击时我有一个按钮导航到下一个 page.But 我希望仅当用户 enters/selects 来自 4 个可用字段中的 2 个时才完成导航。

我读到了 button.But 的 [disabled] 功能，在我的例子中，我只想启用该按钮，但导航仍然不起作用。

我提到了这个 How do I enable a submit button if 1 or more checkboxes are checked? 但对我来说，这些字段是单独制作的，没有使用 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

我实际上会对您提供的 link 进行衍生。由于您似乎有某种形式，我们可以利用它并查看为该形式创建的对象，并看到至少需要填写 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
   }
}

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

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

button

navigateurl

submit-button

ionic2

angular

Here's a demo!