Форма Angular 4, отключенное поле всегда действительно

Может показаться странной формой, но я упростил ее ради вопроса здесь, и это не моя настоящая форма. Но здесь происходит тот же сценарий.

<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>

Итак, у нас есть шаблонная форма с тремя полями. "Зарегистрируйтесь сейчас!" кнопка будет отключена, пока форма недействительна.

Проблема в том, что пока поле «Адрес доставки подарка» отключено, оно не учитывается при проверке формы, и достаточно заполнить полное имя, чтобы форма стала действительной.

Как только я устанавливаю флажок («Хотите ли вы получать от нас подарки на день рождения?»), ввод больше не отключается, и поэтому применяется проверка.

Я не уверен, что это разработанное поведение, но мне было интересно, есть ли способ применить проверку и к отключенным полям.


person Ariel Weinberger    schedule 20.10.2017    source источник
comment
Хотите знать о прецеденте здесь? Почему отключенное поле должно быть включено в проверку? Если вам нужна проверка здесь, почему бы не установить проверку для флажка, который затем включает поле, а также запускает проверку поля?   -  person AJT82    schedule 20.10.2017


Ответы (1)


Насколько я знаю, у меня была такая же проблема раньше. Я исправил это, используя «только для чтения» вместо «отключено» на входе.

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

Можете ли вы попробовать выше предложение?

person Dennis    schedule 20.10.2017
comment
Пробовал вышеописанное, но поскольку я использую Angular Material, мне нужно использовать визуальные эффекты отключенного поля. Конечно, я мог бы разработать что-то похожее только для чтения, но я пытаюсь найти простой способ обойти это. Однако, спасибо! - person Ariel Weinberger; 20.10.2017
comment
@ArielWeinberger, вы когда-нибудь находили решение? Имея ту же проблему - person DevEng; 20.03.2018
comment
@ArielWeinberger та же проблема здесь - person Abdu Manas C A; 25.03.2019