Может показаться странной формой, но я упростил ее ради вопроса здесь, и это не моя настоящая форма. Но здесь происходит тот же сценарий.
<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>
Итак, у нас есть шаблонная форма с тремя полями. "Зарегистрируйтесь сейчас!" кнопка будет отключена, пока форма недействительна.
Проблема в том, что пока поле «Адрес доставки подарка» отключено, оно не учитывается при проверке формы, и достаточно заполнить полное имя, чтобы форма стала действительной.
Как только я устанавливаю флажок («Хотите ли вы получать от нас подарки на день рождения?»), ввод больше не отключается, и поэтому применяется проверка.
Я не уверен, что это разработанное поведение, но мне было интересно, есть ли способ применить проверку и к отключенным полям.