md

Author: davidvalen95

README.md

@@ -1,28 +1,61 @@
 # Dynamic Form with template-driven
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.2.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+## Logic
+This dynamic form use template driven form And Very simple to use
+1. *ngFor the form array
+1. provide the style stack with the current form info and parent Form
+1. provide the model for show error component inside style stack
+
+
+## Usage
+
+**inside component.ts**
+```javascript
+constructor(private title: Title) {
+    title.setTitle('Login');
+
+    const usernameForm: BaseForm = new BaseForm('Username', 'Username', 'username', 'text');
+    usernameForm.rules = {
+      'required': true,
+      'minlength': 5,
+      'maxlength': 7,
+      'pattern': '[\\w]*',
+      'patternInfo': 'Only word and number no spaces and symbols'
+    };
+    usernameForm.value = 'myName';
+
+    const passwordForm: BaseForm = new BaseForm('Password', 'Password', 'password', 'password');
+    passwordForm.rules = {
+      'required': true,
+      'maxlength': 10
+    };
+    this.baseForms.push(usernameForm, passwordForm);
+
+  }
+
+```
+
+1. app.module.ts
+    1. include components in declarations
+        1. show-errors.component
+        1. style-stack.component
+1. Create BaseForm Object from src/app/forms/base-form.ts
+1. Supply constructor in login.component.ts with label,placeholder,name, input type, like pages/login/login.component.ts
+1. Supply rules if needed
+1. push in array
+1. in html usage like pages/login/login.component.html
+
+## Rules
+* required : true | false
+* minlength: number
+* maxlength: number
+* pattern : regex
+* patternInfo: String the info of regex rule
+
+## Default value
+* in BaseForm Object set the .value, it will be 2 way binding
+
+## required file
+* all inside src/app/forms
+* optional the src/style.css for form animation
+* bootstrap v4 for this demo

src/app/pages/login/login.component.ts

@@ -10,26 +10,7 @@ import {BaseForm} from '../../forms/base-form';
 export class LoginComponent implements OnInit {
 
   public baseForms: BaseForm[] = [];
-  constructor(private title: Title) {
-    title.setTitle('Login');
-
-    const usernameForm: BaseForm = new BaseForm('Username', 'Username', 'username', 'text');
-    usernameForm.rules = {
-      'required': true,
-      'minlength': 5,
-      'maxlength': 7,
-      'pattern': '[\\w]*',
-      'patternInfo': 'Only word and number no spaces and symbols'
-    };
-    usernameForm.value = 'myName';
-    const passwordForm: BaseForm = new BaseForm('Password', 'Password', 'password', 'password');
-    passwordForm.rules = {
-      'required': true,
-      'maxlength': 10
-    };
-    this.baseForms.push(usernameForm, passwordForm);
-
-  }
+  c
 
   ngOnInit() {
   }