How to Use JavaScript instead of Custom HTML Attributes for Angular Forms?

Question

Considering this example markup (from http://www.ng-newsletter.com/posts/validations.html):

<div class="row">
  <div class="large-12 columns">
    <label>Your name</label>
    <input type="text" 
        placeholder="Name" 
        name="inputNameAttributeValue" 
        ng-model="signup.name" 
        ng-minlength=3 
        ng-maxlength=20 required />
   <div class="error" 
        ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
        <small class="error" 
        ng-show="signup_form.name.$error.required">
         Your name is required.
    </small>
    <small class="error" 
            ng-show="signup_form.name.$error.minlength">
            Your name is required to be at least 3 characters
    </small>
    <small class="error" 
        ng-show="signup_form.name.$error.maxlength">
        Your name cannot be longer than 20 characters
    </small>
  </div>
  </div>
</div>

Is there a way to accomplish the same thing, but use JavaScript instead of custom Angular attributes?

For example, is there a way I can use JavaScript instead of these Angular html attributes: ng-model, ng-minlength, ng-maxlenth, ng-show?

EDIT: Just to clarify, I'm looking for a solution that uses the Angular JavaScript API. I would like to have a separate JavaScript document (linked from my HTML document) that uses the Angular JavaScript API. For example, is there a way to specify ng-model for a particular form field using the Angular API instead of the custom Angular HTML attribute?

Are you after 'how do I accomplish this without using Angular at all'? You could do it all from scratch with jQuery, but then you're not leveraging what Angular is offering. Or have I misunderstood you? — S McCrohan, Dec 17 '13 at 06:06
There are ways to do all the stuff that you are asking, but to make it easier, AngularJS was created. — exAres, Dec 17 '13 at 10:02
I updated my question. Please see the "Edit:" section at the end. I'm trying to find out if there is a way to accomplish this with Angular. And, I would like to use a "best practices" kind of a solution. So, if the only way to accomplish what I'm after is considered a "hacky" solution, I would not go in this direction. I'm new to Angular, so I'm trying to figure out what's possible. — edt, Dec 17 '13 at 14:06

score 1 · Accepted Answer · edited May 23 '17 at 11:50

As I understand it, you want to add a directive (for example ng-model) from javascript, similar to how you would do it with jQuery. Short answer: Don't do it.

Longer Answer: It's probably technically possible, but it would violate the basic principles of AngularJS. Your controller should not touch the HTML at all, in fact any code which should directly manipulate the HTML should be placed in a directive. And that directive should be placed on the input directly in your HTML, which is exactly what you wanted to avoid.

If placing directives in your HTML is not practical for your project, then perhaps you should reconsider using AngularJS.

There's a rather long (and well written) answer here on Stackoverflow which explains "how to think in AngularJS", you might find that it's of interest: https://stackoverflow.com/a/15012542/179024

It would also be interesting to know why you want to do this? There is often an "Angular way" of doing things, but it can be different from what we are used to doing.

Great answer and thanks for the link. As advised, I will not design my page, and then change it with DOM manipulations. — edt, Dec 18 '13 at 04:58

How to Use JavaScript instead of Custom HTML Attributes for Angular Forms?

1 Answers1