Angular directive - form/input validation and passing arguments/attributes

Question

I'm a bit surprised that I haven't found complete solution to this, as it seems to be a common use case:

I need help with crating custom angular directive. What I have is a form with basic front-end-side validation and messages in <span> which appear on submit.

I have simple form with validation: jsbin sample

What I want to achieve:

• Things like ng-max-length, ng-min-length, ng-pattern, ng-model etc. shouldn't be hard-coded inside of the template, rather passed as arguments from my custom-tag to the inside of directive's template - and assigned to the <input> element. (even fancier would be to assign some of the attributes to input and some other for example inside of label so that directives template can contain not only the input, but a bit bigger part of HTML, including the label)
• two kinds of validation - one by highlighting the fields basing on the classes (no problem with that), second one with <span> elements appearing on submit

What problems am I facing?

1. How to pass the arguments (attributes) from my custom-tag to the input inside of the template?
2. I have now in one HTML file: formName.inputName.$error.typeOfError; How to achieve that now from the inside of the directive/template? Somehow parameterizing it.
3. Regarding showing validation messages on submit: Is the variable submitted set when pressing submit button and cleared when resetting the form a good idea or there is a nicer solution to that?
4. Make the scopes isolated so multiple instances of the directive do not interfere with each other.

Thanks in advance for help.

Answer 1

The docs for creating angular directives don't really give examples but what you need is the scope property defined.

Check the following: https://jsbin.com/zabuza/edit?html,js,output

Also, be very careful with using input[number], caused me major headache in this example as it's not a normal ng type of directive.

Docs I used: docs1 docs2