当我想 select 0 时禁用离子范围

Question

我有一个离子范围，用户可以在其中 select 一个介于 0 和 10 之间的值。我想要求用户 select 一个值，然后再进一步使用 [disabled] 我希望用户能够给出 0 到 10 之间的值。但是由于我要求用户 select 某些东西，所以 select 0 是不可能的。事实上，值默认为 0，因此当用户移动它（移动到 1 或更多）时，按钮变为活动状态，但如果他回到 0，则无法发送结果。

  <div *ngFor="let q of questions">
  <h2>{{q.text}}</h2>
  <ion-item >
      <ion-range min='0' max='10' pin="true" [(ngModel)]="q.answer" >
          <ion-label slot="start">0</ion-label>
          <ion-label slot="end">10</ion-label>
      </ion-range>
    </ion-item>
      <ion-button [disabled]='(q.required && !q.answer)' (click)="getAnswer()">Submit</ion-button>
  </div>

.ts 文件：

  questions = [
    {
      id: 1,
      text : 'test',
      required: true,
      answer: ''
    }
  ];

  getAnswer() {
    console.log(this.questions);
  }

所以 Submit 被禁用，如果我移动它，它会变为活动状态，但如果我回到 0，它会再次禁用...我希望用户能够 select 0 但至少迫使他采取行动...

TD；DR/预期行为

最初 ion-range 的默认值设置为 0，submit 按钮设置为 disabled。如果用户手动设置 select 值，我想启用 submit 按钮。即使用户手动将 ion-range 的值设置为 0.

Answer 1

使用标志来确定用户是否触摸了离子范围。像这样设置一个 ionFocus 事件 -

  <div *ngFor="let q of questions">
  <h2>{{q.text}}</h2>
  <ion-item >
      <ion-range min='0' max='10' pin="true" [(ngModel)]="q.answer" (ionFocus)="onTouch()">
          <ion-label slot="start">0</ion-label>
          <ion-label slot="end">10</ion-label>
      </ion-range>
    </ion-item>
      <ion-button [disabled]='(q.required && !q.answer && !wasTouched)' (click)="getAnswer()">Submit</ion-button>
  </div>

并且在打字稿文件中 -

...
export class DemoPage {

  ...
  wasTouched = false;

  ...
  touched() {
    this.wasTouched = true;
  }
}

当我想 select 0 时禁用离子范围

ion-range disabled when I want to select 0

angular

ionic4