Отключить кнопку, пока ввод недействителен Angular
Я хотел бы сделать определенные поля ввода доступными только для значений integer или decimal. Итак, я получил следующий код:
<input type = "text" pattern = "[0-9]*" [(ngModel)] = "myValue" pInputText class = "medium-field"
(change) = "calculate()"/>
Таким образом, это поле отмечается, если шаблон не соответствует вводу. Тем не менее, я бы хотел отключить кнопку submit, пока шаблон не совпадает. Могу ли я каким-то образом получить доступ к этому значению как к логическому или есть другой способ?
Ответы 3
Если вы не хотите использовать реактивные формы, вы можете:
<input type = "text" pattern = "[0-9]*" [(ngModel)] = "myValue" #myInput />
<button [disabled] = "!myInput.validity.valid">Submit</button>
Это отключит вашу кнопку отправки, если HTML-валидность вашего ввода недействительна.
Здесь - рабочий пример.
Я также предлагаю вам использовать type = "number" в вашем input.
Форма будет автоматически помечена как недействительная, если введенные вами данные не совпадают с шаблоном.
Вы можете просто использовать:
<form novalidate
#form = "ngForm">
/* Your inputs */
<button type = "button"
[disabled] = "form.invalid"> // form as per the referenced #form = "ngForm"
// Disables if your inputs are invalid or doesn't meet with its pattern
Submit
</button>
попробуйте проверить форму для него. используя * ngIf и
<button type = "submit" [disabled] = "form.invalid">SEND</button>
Самый простой способ - это использовать Reactive Forms в Angular; но объяснение того, что это такое, вероятно, выходит за рамки ответа на вопрос. Альтернативный способ - активировать флаг
buttonDisabledв вашей функции вычисления, который контролирует, отключена ваша кнопка или нет.