An invalid form control with name='' is not focusable

[Thiago de Castro]

How are you guys?

I'm working on a big project and this project we are using AngularJS, Bootstrap, JQuery and others.

At the moment the bug that is bothering me most involves the validation of an input of type "email".

So I would like to put the entire code in a JSFiddle or Plunker, but the project is quite large and I still have difficulty using these simulation tools.

For now I am putting only part. Behold: http://jsfiddle.net/CJjXQ/

(Like I said I have no experience with the tools hehe)

Well here is my problem:

Whenever I do some operation (usually involving a button) the following error occurs:

An invalid form control with name = 'NewOperator.Nome' is not focusable. index.html: 1

An invalid form control with name = 'NewOperator.Login' is not focusable. index.html: 1

Any idea what could be?

Through a Google search, I found an interesting answer, but could not apply the solution for my case.

http://stackoverflow.com/questions/7168645/javascript-error-invalid-form-control-only-in-google-chrome

[Thiago de Castro]

I believe I have found the problem:

The code included in the jsfiddle is not complete, but it turns out that form is invisible until you press a button thus activating its visualization.

In theory AngularJS can not focus on any field where it has the required property, since the guard which form these fields are invisible.

So imagine the following solution: I keep the form in a partial creation.

When the user activates the button to create a partial page is incorporated through the ng-include.

But now I have a new problem how to remove this part once the form is no longer needed (for saving the data or cancel the operation).

Any idea?

[Thiago de Castro]

I managed to partially solve the problem. Through a script part, done in JQuery, I can import the creation form.

But I am not able to compile the html aiming Angular understand the variables involved in imported html.

Throughout my search I noticed that the AngularJS way is to create a Directive. And I still do not understand how to create directives.

I'll open a new topic to address the problem of creating a Directive, and will do everything possible to create a simulation JSFiddle.

[Aneesh Kumar]

adding novalidate attribute to the form seems solves the issue

<form name="myform" novalidate >

[Ali Mumtaz]

thanks Aneesh kumar this helps... :) 

[Anis Wine]

thanks.... so help me