2

My code looks something like this - 

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

Now I can't submit the form even if I fill the phone number field.

But if I code like this : 

<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>

Its perfectly working now.

So the difficulty is with 'this'. I cant even check the context of this, it should be the the context of $scope.myForm.phone, but somehow it isn't. Can someone please explain.

Improve this question
2
  • So does this mean that even if I want the context to be myForm.phone, I cant do that in my view? as context will always be the parent, i.e the scope. Doesn;t this violates normal javascript behavior of lexical scoping? Commented Jul 28, 2015 at 9:23
  • No, you don't have the force to change the scope. However if you implement a custom directive and apply to inputs in form the directive will have the scope of field, as it will reference ng-model of the field Commented Jul 28, 2015 at 18:04

2 Answers 2

Reset to default
3

That's not what ng-submit is for. ng-submit is a function or expression called when the form is submitted. It's nothing to do with validation. If you want to ensure the text field is not empty before it's submitted you just need to add required and then if it is empty myForm.$invalid will be true.

Is this what you are trying to do:

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>

controller

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

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

update

The this that you passed into the ng-submit is a reference to your controller. Since you have the name attribute set to myForm you can access the form model via this.myForm and the phone model via this.myForm.phone. So if you wanted to use $isEmpty to verify if the field is empty you would have to use:

this.myForm.phone.$isEmpty(this.myForm.phone.$viewValue)
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

The input field is not mandatory. No use of required. Why is this condition is because there might be multiple input fields later on in my code, and al of them not mandatory. Only condition is that one of them should be filled. I found shortest way in using $isEmpty. But I agree that ng-submit shouldn't be used like that. <br> But can you please explain why can't I use the context of myForm.phone inside $isEmpty() function?
Was surprised to learn that this is accessible in templates and references current scope, not controller. But you're right it is possible to reach the formController since it resides in the scope object
2

ng-submit is used to provide a handler for the moment when the form IS submitted. What you're looking for is disabling submit button with 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>

Pay attention to required directive added to the input. Which makes sure this field is not empty for submit

Improve this answer

6 Comments

Good answer. Though I think the input will need an ng-model directive assigned for the validation to take effect.
@MattHerbstritt well it depends. Lately I was digging out a complicated question about forms in angular. And I learned that all angular directives for form validation (max, min, required etc.) are actually wrappers around browser attributes. They only provide extra (angular) functionality but still are handled by browsers. That is why you can add required and there will be no way to submit the form while field is empty. However if you provide custom validation, invalid state of form (in angular) doesn't prevent it from submit. And you have to add ng-disabled to control it manually
Hi. Thanks for disabled, invalid and other things. But what actually has intrigued me is the definition of 'this' when I tried to use it inside $isEmpty(). There are actually 2 inputs, both of them are optional, so no use of required attribute. But one of them must be filled. I have seen in angular js that if the input field is not dirty, then the field is also valid, so no use of $invalid here.
@Vineet'DEVIN'Dev valid or not can be defined by custom validators, $dirty has no reference to validation, it's simply automated field for your convenience. this inside ng-submit I suppose just resulted in an invalid expression.
No. 'this' didn't resulted in invalid expression. Well I can do validation with ng-pattern and a good regex for phone numbers. That's not my problem. As I said, I could have more than 2 non-mandatory inputs in the form. But I would like user to fill at least one before submitting. Easiest way is to use $isEmpty(). Now comes the usefulness of using the context of myForm.phone inside this function. But this context is not accessible there. But 'this' keyword is not invalid, some context is being passed, just this.$viewValue is undefined.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.