угловых JS' в форме ввода

Question

Мой код выглядит примерно так -

<form name="myForm" ng-submit="!myForm.phone.$isEmpty(this.$viewValue)" action="/my/url" method="get"> 
<input name="phone"> 
<button type="submit">submit</button> 
</form> 

Теперь я не могу отправить форму, даже если я заполнить поле номер телефона.

Но если я код так:

<form name="myForm" ng-submit="!myForm.phone.$isEmpty(myForm.phone.$viewValue)" action="/my/url" method="get"> 
<input name="phone"> 
<button type="submit">submit</button> 
</form> 

Его прекрасно работает.

Таким образом, трудность заключается в «этом». Я не могу даже проверить контекст этого, это должен быть контекст $ scope.myForm.phone, но почему-то это не так. Может кто-то объяснит.

Answer 1

Это не то, что ng-submit для. ng-submit - это функция или выражение, вызываемое при отправке формы. Это не имеет никакого отношения к проверке. Если вы хотите, чтобы текстовое поле не было пустым перед его отправкой, вам просто нужно добавить required, а затем, если он пуст, myForm.$invalid будет правдой.

Является ли это то, что вы пытаетесь сделать:

HTML

<form name="myForm" ng-submit="submit(phone)"> 
    <input name="phone" type="text" ng-model="phone.value" required> 
    <button type="submit" ng-disabled="myForm.$invalid" >submit</button> 
</form> 

контроллер

$scope.submit = function(phone){ 
    console.log('phone', phone); 
} 

$scope.phone = { 
    value: '' 
}; 

обновление

this, который вы передали в ng-submit, является ссылкой на ваш контроллер. Так как у вас есть атрибут name, установленный на myForm, вы можете получить доступ к форме модели через this.myForm, а модель телефона - this.myForm.phone. Так что если вы хотите использовать $isEmpty, чтобы проверить, если поле пусто вы должны использовать:

this.myForm.phone.$isEmpty(this.myForm.phone.$viewValue) 

Answer 2

ng-submit используются для обеспечения обработчика для того момента, когда форма была отправлена. Что вы ищете, отключив submit кнопку с ng-disabled

<form name="myForm" ng-submit="functionInController()" action="/my/url" method="get"> 
<input name="phone" required> 
<button type="submit" ng-disabled="myForm.$invalid">submit</button> 
</form> 

Обратите внимание на required директивы добавлены к входу. Который гарантирует, что это поле не пусто для отправки