Develop Reference

why doesn't ng-pattern work?

In the following form, the ng-pattern validation does not work.
The regex works as i expect in https://regex101.com.
It should show .custom-error div if the user enters some special character.
Where am I doing it wrong?
<form novalidate name="myForm">
<label for="subnet">only alphanumeric</label>
<input type="text" name="subnet" ng-model="subnet" class="form-control"
id="subnet" required ng-pattern="/[a-zA-Z\x7f-\xff]\s*/">
<div class="custom-error" ng-show="myForm.subnet.$error.pattern">
not in one of predefined characters
</div>
</form>

I think the ng-show="myForm.subnet.$error.pattern" is wrong. I read the official angular doc and i think you should try ng-show="!myForm.subnet.$valid" instead :
<input type="text" name="subnet" ng-model="subnet" class="form-control" id="subnet" required ng-pattern="/[a-zA-Z\x7f-\xff]\s*/">
<div class="custom-error" ng-show="!myForm.subnet.$valid">
not in one of predefined characters
</div>
It hope it will help you

Change the ng-pattern code to ng-pattern="/^[a-zA-Z\x7f-\xff\s]*$/". It will work now.
Working plunker here
All the best.

How to use ng-messages with such a input like <input name='user[name]'>

I am new to Angular, and try to use ng-messages to do something like form-validate. Now, I have no problem when I use ng-message in the following situation:
<form name='loginForm' novalidate>
<input name='user' required>
<div ng-messages=loginForm.user.$error>
<div ng-message='required'> this field is required...</div>
</div>
<form>
but when I change name attribute of input,<input name='user[name]' required>, ng-message would not work again. Is there anyone can help me?

Form name attributes CAN be populated dynamically.
Remember, name attribute reads a string, and ng-messages reads an angular expression that should be evaluated to a reference to the $error object.
Since this reference is obtained through an angular expression, it can even be a method that returns the reference.
In your case, assuming your name attribute looks like this:
<form name="loginForm">
<input name="{{ user.name }}" required />
</form>
The correct syntax should be:
<div ng-messages="loginForm[user.name].$error" ></ div>

How do I access $valid on an Angular Form inside an ng-repeat?

Edit:
As demonstrated in the plunker by Wayne Ellery, the second code sample does actually work. The error was somewhere else in the page.
http://plnkr.co/edit/rtmwOzhiWn0695OGwS9b?p=preview
Original
I'm trying to disable the 'submit' button on a form using AngularJS, however I run into trouble if the form is inside an ng-repeat.
This following code works fine:
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
however this doesn't, even if there's only one item in the array:
<div ng-repeat="item in data.Items">
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
<div>
Presumably this is because the name of the form is somehow altered by the repeat. I saw a post which suggest adding {{$index}} to the form name
AngularJs dynamic name for a form inside ng-repeat
But if I do this I'm not sure how to then access the form name within the ng-disabled tag - obviously this won't work:
<div ng-repeat="item in data.items" ng-init="formName = 'myForm' + $index">
<form name="{{formName}}">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="{{formName}}.$invalid">Save</button>
</form>
</div>
How do I access the correct form to check the validation of the current form?

I'm not sure what the error in my code actually was, but after deleting the ng-repeat and then re-typing the whole thing it now just works as expected, so I'll put an answer here for clarity.
As pointed out by pankajparkar and WayneEllery in the comments, the correct syntax for accessing $valid inside an ng-repeat is simply:
<div ng-repeat="item in data.Items">
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
<div>

AngularJS forms not finding input elements

At some point during the development of my app, AngularJS forms stopped working... Yes that means they used to work. That is, form elements are supposed to create their own scope with every <input /> by their name. However all my forms are now completely empty, as if I had no input elements with the name attribute. Now I can't make any sort of form validation. I've tried even the most trivial forms and still nothing:
<form name="form>
<input type="text" name="input" required />
</form>
Any suggestions as to how to debug this?

Hi to do validation your input have to have model directive please see here: http://jsbin.com/deref/1/edit
<form name="form">
<input type="text" name="foo" required ng-model="input.model"/>
<span ng-show="form.foo.$error.required">required</span>
</form>

Try console.log on the scope
console.log($scope.form);
If you have your controllers set up correctly, your form should be attached to the scope of controller.

Error: [$compile:multidir] Multiple directives [form, form] asking for 'form' controller on: <form ng-form="">

I am getting this error on a form I am building in angularjs.
`Error: [$compile:multidir] Multiple directives [form, form] asking for 'form' controller on:
<div data-ng-controller="shortlistController">
<ul>
<li data-ng-repeat="job in jobs">
<div>{{ job.role }}</div><div>{{ job.salary }}</div><div>{{ job.company }}</div>
</li>
</ul>
</div>
<form ng-form>
<input type="text" ng-model="newRole">
<input type="text" ng-model="newSalary">
<input type="text" ng-model="newCompany">
<input type="text" ng-model="newUrl">
<button>Submit</button>
</form>
Initially I had the form within data-ng-controller, I took it out to see if the controller might have been the issue..
Please ask if you think I need to post more code, I am using angulars native routing system

Each of these is more or less identical and refers to the form directive:
<form></form>
<div form></div>
<div x-form></div>
<div data-form></div>
So you can do either <div form></div> or simply <form></form>, and in both cases they refer to the same form directive. But <form form></form> would be redundant.
The ngForm directive which you mention is actually an alias for the form directive above, and can be referenced using any of these:
<ng-form></ng-form>
<div ng-form></div>
<div x-ng-form></div>
<div data-ng-form></div>
So in your case, you were doing <form ng-form></form>, which is really the same as <form form></form>, which is why you're getting that error.
This page explains in more detail all the different ways to reference directives:
http://docs.angularjs.org/guide/directive
BTW, a benefit (sometimes) to using the <div ng-form></div> format is that you can do nested forms, whereas you can't do nested forms using just the <form> tag.

You don't need the ng-form if you're using <form> as it automatically is hooked up to the ng-form directive. You use either or, not both.

I encountered the same problem when I set my component name to form.
angular.module("testApp").component("form", {
...
});
Effect was the similar as in #user553086 answer. Change component's name solves the problem.