Question

我有2个字段：

<input type="text" name="quantity" #quantity="ngModel" [(ngModel)]="orderProduct.selectedProduct.quantity" required min="1" max="50">

和一个复选框

<label class="checkbox">
    <input type="checkbox" name="orderProduct.selectedProduct.Option" value="{{option.Value}}" [(ngModel)]="option.checked" /> <!-- disable checkbox -->
    <span class="checkmark"></span> <!-- change css style to this element -->
</label>

如果用户在checkmark字段中输入了不正确/正确的值范围（最小值和最大值之间），如何禁用/启用该复选框并将样式更改为quantity元素？

我是新手，正努力寻找解决方案。我正在使用Angular 5。

Answer 1

disabled中有<input>个属性。因此，在disabled中，您可以使用 <input type="text" name="quantity" .. 来检查quantity.invalid的有效性，如下所示：

<label class="checkbox">
    <input type="checkbox" name="orderProduct.selectedProduct.Option" value="{{option.Value}}" [(ngModel)]="option.checked" disabled="quantity.invalid"/> <!-- disable checkbox -->
    <span class="checkmark"></span> <!-- change css style to this element -->
</label>

有两种方法可以检查有效性（如果您不想使用reactive forms）：

将自定义validator传递到<input>。详细了解here和here。
在ngModelChange中使用<input>，就像<input (ngModelChange)="isInputValid($event)" name="quantity" ..一样，在您的.ts文件中，根据以下方法的有效性，编写此方法来更新布尔值（例如isquantityValid）您的输入。然后使用该变量来enable\disable复选框。 Read More

要有条件地更改样式，请执行以下操作：

<span [ngClass]="isquantityValid ? 'styleClass1' : 'styleClass2'">content</span>

如何在Angular中的另一个字段更改时禁用元素/更改样式

1 个答案: