2

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

我阅读了有关按钮的 [disabled] 功能。但在我的情况下，我希望仅启用按钮，但导航仍然不应该工作。

我提到了这个如果选中了 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>
4

1 回答 1

0

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

这是一个演示！

于 2017-03-15T18:46:01.640 回答