Angular 4 表单,禁用字段始终有效
Angular 4 form, disabled field is always valid
可能看起来像一个奇怪的形式,但为了这里的问题我简化了它,这不是我的实际形式。但同样的情况也发生在这里。
<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>
所以我们有一个包含三个字段的模板驱动表单。只要表单无效,"Register now!" 按钮就会被禁用。
问题是,只要"Gift shipping address"字段被禁用,它就不算在表单验证中,填写全名就足以使表单有效。
一旦我勾选复选框 ("Would you like to receive birthday gifts from us?"),输入就不再被禁用,因此应用验证。
我不确定这是否是设计的行为,但我想知道是否还有一种方法可以对禁用的字段应用验证。
据我所知,我以前也遇到过同样的问题。我通过在输入上使用 "readonly" 而不是 "disabled" 来修复它。
<input name="giftAddress" required [readonly]="!isAddressEditable"> // false (disabled) by default
你能试试上面的建议吗?
可能看起来像一个奇怪的形式,但为了这里的问题我简化了它,这不是我的实际形式。但同样的情况也发生在这里。
<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>
所以我们有一个包含三个字段的模板驱动表单。只要表单无效,"Register now!" 按钮就会被禁用。
问题是,只要"Gift shipping address"字段被禁用,它就不算在表单验证中,填写全名就足以使表单有效。
一旦我勾选复选框 ("Would you like to receive birthday gifts from us?"),输入就不再被禁用,因此应用验证。
我不确定这是否是设计的行为,但我想知道是否还有一种方法可以对禁用的字段应用验证。
据我所知,我以前也遇到过同样的问题。我通过在输入上使用 "readonly" 而不是 "disabled" 来修复它。
<input name="giftAddress" required [readonly]="!isAddressEditable"> // false (disabled) by default
你能试试上面的建议吗?