Как лучше всего отключить кнопку отправки формы в Angular 7+ в зависимости от текущего состояния формы? - PullRequest
0 голосов
/ 08 октября 2019

Вопрос может показаться немного запутанным, но, скажем, у меня есть кнопка вроде:

<button type="button" class="menu-button" [disabled]="isInvalidForm()">Save</button

isInvalidForm() {
console.log('I am running!');
return this.nameValidator.errors || this.lastnameValidator.errors;
}

И когда это так (я просто упростил форму ради вопроса), этоЖурналы 100-х "Я бегу!"как это называется так много. Несмотря на то, что когда я нажимаю на форму, она вызывается еще 100 раз.

Я сомневаюсь, что этот способ проверки кнопки включен или не очень хорошо выглядит. Еще один способ - вызватьФункция на нажатие кнопки, но это определенно не то, что я хочу. Что было бы лучше, чтобы избежать множества обращений к этой функции, чтобы отключить простую кнопку? (или действительно нормально использовать функцию в элементах DOM?)

или вкратце, это то же самое, используя:

<button type="button" class="menu-button" [disabled]="isInvalidForm()">Save</button>

с:

  <button type="button" class="menu-button" [disabled]="nameValidator.errors || lastnameValidator.errors">Save</button>

1 Ответ

2 голосов
/ 08 октября 2019
<button type="button" class="menu-button" [disabled]="!form.valid">Save</button

"Каждый раз, когда изменяется значение элемента управления формы, Angular запускает проверку и генерирует либо список ошибок проверки, что приводит к состоянию INVALID, либо значение NULL, что приводит к состоянию VALID." Официальная угловая документация

Использование form.invalid может активировать кнопку до завершения асинхронной проверки.

...