Итак, я начинаю с требования отключения кнопки отправки, если необходимое поле не заполняется.
<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.
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/