Angular 4格式，禁用字段始终有效

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

据我所知，我之前也遇到过同样的问题。我通过在输入中使用“只读”而不是“禁用”来修复它。

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

您可以尝试以上建议吗？