Skip to main content

Build Dynamic Forms in AngularJS Directives

We wanted to build a dynamic form that has some types of elements such as text field, text area, label, date picker, combobox, file uploader, etc. Beside that, the form is dynamic because basing on the provided configuration data, it should render our expected GUI.

We conducted a  research with two options: building our own directives or using a third-party directives.

- Approach 1: using a third-party directives

 + Google keyword: "build dynamic forms directives + angular third party"

 + This idea met our idea: "http://blog.backand.com/build-dynamic-forms/", but it's not free to use.

 + This 3rd-party was possible: http://schemaform.io/

Schema form hello world app: http://plnkr.co/edit/7Oqxxl?p=info

- Approach 2: building our own directives

We chose this approach because it looks more simple than using "schema form" 3rd-party and we thought that we can confidently handle it.

Example:  http://codepen.io/cavoirom/pen/meJBxv?editors=101 | http://codepen.io/vnnvanhuong/pen/qOOROy?editors=101
Labels:
Reactions:

Comments

  1. Great source of info on angularjs. We always rely on this blog other than our regular online Angularjs training classes helped me a lot.

    ReplyDelete

  3. I have read your blog its very attractive and impressive. I like it your blog.

    Java Training in Chennai Core Java Training in Chennai Core Java Training in Chennai

    Java Online Training Java Online Training Core Java 8 Training in Chennai Core java 8 online training JavaEE Training in Chennai Java EE Training in Chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

Small Changes to Java 7 via Project Coin and Why They are Useful

Did you know how new features were added into Java 7? The following are functionalities that can be considered.
Source: [1] Project Coin is all about the changes in the range from syntactic sugar to new language feature. This is what we're talking about today.

Since Java 7 is the first version developed in an open source manner, there is an amount of actions that must be performed for any changes as follows:
Update the Java Language Specification (JSL)Implement a prototype in the source compilerAdd library support essential for the changeWrite tests and examplesUpdate documentEtc, ... Project Coin has submitted a lot of proposals (almost 70) but only some of them are chosen to Java 7. Why? Briefly, Java is a rich static type system and it has a lot of possible interaction points between different bits of it. Making changes to this type system is prone to creating unexpected surprises.

Wow! It is tough, right? Let's take a look what features Project Coin brought to Java 7.
Strings…
Post a Comment
Read more

Climbing Fansipan – Highest Peak of Indochina

Fansipan is a mountain in Vietnam, the highest in Indochina, at 3,143 metres. It is located in the Lào Cai Province of the Northwest region of Vietnam, 9 km southwest of Sa Pa Township in the Hoang Lien Son mountain range. Wikipedia
Currently you can get the peak by cable car; however, I loved to explore it by climbing.

Here are what I have learned from this exciting journey. 💪
Do not procrastinate I have had no experience of climbing a high mountain before. Then, I've sought advice from my friends, but they suggested that I should not make it at that time due to bad weather and lack of experience. I know it never come true unless I just make my decision. Can't wait! Prepare for your journey You firstly need getting to know about the journey, schedule, transportation, etc. Recommended sources: YouTube videos, blog posts and tour companies websites.
Tips - Quality hiking shoes helps a lot - Bring your stuffs as light as possible. Important stuffs: a light raincoat and water (t…
Post a Comment
Read more

Strategy Design Pattern

For example, I have an program with an Animal abstract class and two sub-classes Dog and Bird. I want to add a new behavior for the class Animal, this is "fly".  Now, I face to two approaches to solve this issue:

1. Adding an abstract method "fly" into the class Animal. Then, I force the sub-classes should be implemented this method, something like:

public abstract class Animal{ //bla bla public abstract void fly(); } public class Bird extends Animal{ //bla bla public void fly(){ System.out.println("Fly high"); } } public class Dog extends Animal{ //bla bla public void fly(){ System.out.println("Cant fly"); } }
2. Creating an interfaces with method "fly" inside. The same issue to abstract class, I force the classes these implement this interface should have a method "fly" inside:

public interface Flyable{ public void fly(); } public class Bird implements Flyable{ //bla bla public void fly(){ System.out.println…
Post a Comment
Read more

Java Core - Top 10 Questions Every Developer Should Know

#RandomlyPickedByMe

What is the difference between Javascript and Java?Difference between StringBuilder and StringBuffer?Why do I get "SomeType@a3fde" when I print my code?Why is String immutable?Why "equals" method when we have "==" operator?Is List<Dog> a subclass of List<Animal>?Why shouldn't we use raw type?Is Java “pass-by-reference” or “pass-by-value”?What's the advantage of a Java enum versus a class with public static final fields?Why "double x = 0.1 + 0.2" and result of print(x) is 0.30000000000000004?
 1. What is the difference between Javascript and Java? Holy crap! (Vietnamese: Thế quái nào lại có câu hỏi ngớ ngẩn vậy chứ?)

"Java and Javascript are similar like Car and Carpet are similar." - Greg Hewgill (on StackOverflow)
2. Difference between StringBuilder and StringBuffer String is immutable. StringBuilder and StringBuffer are mutable. StringBuffer is thread-safe. StringBuilder is modern than StringBuff…
Post a Comment
Read more

Review - The Object-Oriented Thought Process, by Matt Weisfeld

In this post, I would like to point out what I understood after closing my eyes and thinking about what  exactly I have learned from this book. That means the layout of content does not follow the book.
From Procedural to Object Oriented Once upon a time, there is an issue that it is very hard to test and debug in Procedural programming because the data is sometimes global and can be modified by multiple functions.

Object-Oriented (OO) programming addresses these problems by combining both data and functions into an object. That means only functions belong to the object can access its own data.

Let us check the below two different approaches for a case that we want to transfer information between clients and servers across a network.

-    Procedural programming: a client (browser) transfers a JSON data to a server which needs to know how to process with this data. In order words, a handshaking agreement must be defined for the client and server in order to work together.
-    OO prog…
9 comments
Read more