универсальное решение для ngdisabled только с обязательным полем

0

Итак, я начинаю с требования отключения кнопки отправки, если необходимое поле не заполняется.

<form name="form">
  <input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" /><br/>
  <input type="text" placeholder="First Name" data-ng-model="model.lastName" name="lastname"  ng-required="true" /><br/>

  <button type="button" ng-disabled="form.$invalid">Submit</form>  

Все идет нормально. Однако, если есть дополнительное поле проверки, как указано ниже, вышеуказанное не будет работать, поскольку требование состоит только в том, чтобы отключить кнопку отправки, если обязательное поле не заполняется только независимо от другой проверки.

<form name="form">
  <input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" ng-minLength="5" /><br/>
  <input type="text" placeholder="Last Name" data-ng-model="model.lastName" name="lastname"  ng-required="true" ng-minLength="3" ng-maxLength="10" /><br/>

  <button type="button" ng-disabled="form.$invalid">Submit</button>
</form>  

Я мог бы написать раздутое решение независимо $watch за изменениями каждого входного значения для каждой формы в контроллере, но это утомительно и не может использоваться повторно. Что я ожидаю, это нечто более общее, как показано ниже:

<button type="button" ng-disabled="!form.$required">Submit</button>

Возможно, я пропустил что-то/уже существующую функцию, которая уже доступна. Но я думаю, что отключить кнопку отправки до тех пор, пока не будет заполнено все необходимое поле, это что-то очень распространенное для UX/UI.

1 ответ

2

AFAIK нет простого решения, как вы упомянули, вы можете написать директиву, включая директиву формы, и установить флаг в форме (просмотрев поля формы ng). Или, в контроллере с формой есть функция области, например

function disableSubmit() {
   return form.FirstName.$error.required || form.LastName.$error.required;
}

<button type="button" value="SAVE" ng-disabled="disableSubmit()">Submit</button>

Добавьте здесь @kubuntu jsFiddle. http://jsfiddle.net/3eqz2/421/

  • 0
    Я не думаю, что привязка функции к ng-disabled работает. enableSubmit () всегда будет иметь значение true. jsfiddle.net/3eqz2/416
  • 0
    Работает jsfiddle.net/3eqz2/419 . Вы не использовали $ scope.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню