Question

可能看起来像一个奇怪的形式，但我为了这个问题简化了它，这不是我的实际形式。但是同样的情况发生在这里。

<form (ngSubmit)="submit(form)" #form="ngForm">
    <div>
        Full name:
        <input name="fullName" required>
    </div>
    <div>
        Would you like to receive birthday gifts from us?
        <input type="checkbox" name="gifts" [(ngModel)]="isAddressEditable">
    </div>
    <div>
        Gift shipping address:
        <input name="giftAddress" required [disabled]="!isAddressEditable"> // false (disabled) by default
    </div>

    <button type="submit" [disabled]="form.invalid">Register now!</button>
</form>

所以我们有一个带有三个字段的模板驱动表单。 “立即注册！”只要表单无效，该按钮就会被禁用。

问题在于，只要“礼品送货地址”字段被禁用，它就不会计入表单验证，并且只需填写全名即可使表单有效。

只要勾选复选框（“您想收到我们的生日礼物吗？”），输入就不再被禁用，因此验证适用。

我不确定这是否是设计行为，但我想知道是否有办法在禁用字段上应用验证。

Answer 1

据我所知，我之前遇到过同样的问题。我通过在输入上使用“readonly”而不是“disabled”来修复它。

<input name="giftAddress" required [readonly]="!isAddressEditable"> // false (disabled) by default

你能尝试一下这个建议吗？

Angular 4表单，禁用字段始终有效

1 个答案: