如何在表单中将ion-range设置为必填字段

Question

为了获取用户评分，我在表单中使用了一个 ion-range 组件。虽然这是必填字段，但系统允许在未设置评分值的情况下保存评论。

<ion-content>
<form #Form="ngForm" (ngSubmit)="save()" >   
    <ion-item>
      <ion-range min="0" max="100" pin="true" [(ngModel)]="rating" [ngModelOptions]="{standalone: true}" required>
        <ion-icon range-left name="sad"></ion-icon>
        <ion-icon range-right name="happy"></ion-icon>
      </ion-range>
    </ion-item>
    <button ion-button [disabled]="!Form.form.valid" ion-button full color="secondary" >Save</button>
</form>
</ion-content>

这背后的原因是什么？

- yashodha_h

Answer 1

“required”属性不是范围组件的一部分，因此它不能以这种方式工作。

您可以添加另一个条件到按钮的“disabled”属性中，例如：

<button ion-button [disabled]="!Form.form.valid || rating === 0" ion-button full color="secondary" >Save</button>

如果 rating 属性等于 0，则按钮仍将被禁用。

- sebaferreras