forms - 如何使 ionic 范围成为表单内的必填字段

Question

为了获得用户评分，我在表单中使用了 ionic 范围组件。虽然它是一个必填字段系统，但允许在不设置评级值的情况下保存评论。

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

这背后的原因是什么？

Answer 1

required 属性不是 Range component 的一部分，所以它不会以这种方式工作。

你可以做的是向按钮的 disabled 属性添加另一个条件，如下所示

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

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