Merge pull request #329 from DevExpress/Form_items_as_dxi_item

Configuration components improvment

Author: kvet

examples/app/app.component.html

@@ -20,10 +20,10 @@ <h2>Angular 2 Forms</h2>
         <div class="form-group">
 
             <label for="email">Email</label>
-            <dx-text-box formControlName="emailControl" [(ngModel)]="email" [isValid]="emailControl.valid || emailControl.pristine" [validationError]="{ message: 'Enter correct email' }"></dx-text-box>
+            <dx-text-box formControlName="emailControl" [(ngModel)]="formData.email" [isValid]="emailControl.valid || emailControl.pristine" [validationError]="{ message: 'Enter correct email' }"></dx-text-box>
 
             <label for="password">Password</label>
-            <dx-text-box formControlName="passwordControl" [(ngModel)]="password" mode="password" [isValid]="passwordControl.valid || passwordControl.pristine" [validationError]="{ message: 'Password should be greater that six symbols' }"></dx-text-box>
+            <dx-text-box formControlName="passwordControl" [(ngModel)]="formData.password" mode="password" [isValid]="passwordControl.valid || passwordControl.pristine" [validationError]="{ message: 'Password should be greater that six symbols' }"></dx-text-box>
 
         </div>
         <label>Toggle form controls state: </label>
@@ -36,13 +36,18 @@ <h2>DevExtreme validation features</h2>
         <div class="form-group">
 
             <label>Email</label>
-            <dx-text-box [(value)]="email">
-                <dx-validator [validationRules]="dxValidationRules.email"></dx-validator>
+            <dx-text-box [(value)]="formData.email">
+                <dx-validator>
+                    <dxi-validation-rule type="required" message="Email is required."></dxi-validation-rule>
+                    <dxi-validation-rule type="email" message="Email is invalid."></dxi-validation-rule>
+                </dx-validator>
             </dx-text-box>
 
             <label>Password</label>
-            <dx-text-box [(value)]="password" mode="password">
-                <dx-validator [validationRules]="dxValidationRules.password"></dx-validator>
+            <dx-text-box [(value)]="formData.password" mode="password">
+                <dx-validator>
+                    <dxi-validation-rule type="required" message="Password is required."></dxi-validation-rule>
+                </dx-validator>
             </dx-text-box>
 
             <dx-validation-summary></dx-validation-summary>
@@ -51,6 +56,26 @@ <h2>DevExtreme validation features</h2>
         <dx-button (onClick)="validate($event)" text="Submit"></dx-button>
     </dx-validation-group>
 
+    <h2>dxForm</h2>
+    <dx-form
+        #dxForm
+        [formData]="formData"
+        labelLocation="top">
+        <dxi-item 
+            dataField="email"
+            editorType="dxTextBox">
+            <dxi-validation-rule type="required" message="Email is required."></dxi-validation-rule>
+            <dxi-validation-rule type="email" message="Email is invalid."></dxi-validation-rule>
+        </dxi-item>
+        <dxi-item 
+            dataField="password"
+            editorType="dxTextBox"
+            [editorOptions]="{ mode: 'password' }">
+            <dxi-validation-rule type="required" message="Password is required."></dxi-validation-rule>
+        </dxi-item>
+    </dx-form>
+    <dx-button (onClick)="dxForm.instance.validate()" text="Submit"></dx-button>
+
     <h2>Editor Widgets</h2>
 
     <dx-button text="Simple button" (onClick)="boolValue=!boolValue"></dx-button><br/>

examples/app/app.component.ts

@@ -99,19 +99,9 @@ import{
 export class AppComponent implements OnInit {
     @ViewChild(DxPopoverComponent) popover: DxPopoverComponent;
     text = 'Initial text';
-    email: string;
+    formData = { email: '', password: '' };
     emailControl: AbstractControl;
-    password: string;
     passwordControl: AbstractControl;
-    dxValidationRules = {
-        email: [
-            { type: 'required', message: 'Email is required.' },
-            { type: 'email', message: 'Email is invalid.' }
-        ],
-        password: [
-            { type: 'required', message: 'Email is required.' }
-        ]
-    };
     form: FormGroup;
     boolValue: boolean;
     numberValue: number;