Merge pull request #188 from DevExpress/DxValidator_as_nested_component

Dx validator as nested component

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Bug Fixes
 
+- Fix the 'dx-validator' component ([#30](https://github.com/DevExpress/devextreme-angular2/issues/30))
 - Fix the component property change propagation to the corresponding widget option ([#6](https://github.com/DevExpress/devextreme-angular2/issues/6))
 
 ## 16.2.1-alpha.1 (2016-10-20)

README.md

@@ -250,11 +250,63 @@ export class AppComponent implements OnInit {
 }
 ```
 
+### Using DevExtreme validation features 
+
+You can use the [built-in validators](https://js.devexpress.com/Documentation/16_1/ApiReference/UI_Widgets/dxValidator/Validation_Rules/), 
+validation summary and other DevExtreme validation features with Angular 2 DevExtreme editors.
+
+
+```html
+<dx-validation-group>
+
+    <dx-text-box [(value)]="email">
+        <dx-validator [validationRules]="validationRules.email"></dx-validator>
+    </dx-text-box>
+    <dx-text-box [(value)]="password" mode="password">
+        <dx-validator [validationRules]="validationRules.password"></dx-validator>
+    </dx-text-box>
+
+    <dx-validation-summary></dx-validation-summary>
+
+    <dx-button (onClick)="validate($event)" text="Submit"></dx-button>
+
+</dx-validation-group>
+```
+
+
+```js
+@Component({
+    selector: 'my-app',
+    templateUrl: 'app/app.component.html'
+})
+export class AppComponent {
+    email: string;
+    password: string;
+    validationRules = {
+        email: [
+            { type: 'required', message: 'Email is required.' },
+            { type: 'email', message: 'Email is invalid.' }
+        ],
+        password: [
+            { type: 'required', message: 'Email is required.' }
+        ]
+    };
+    validate(params) {
+        let result = params.validationGroup.validate();
+        if (result.isValid) {
+            // form data is valid
+            // params.validationGroup.reset();
+        }
+    }
+}
+```
+
+
 ### Accessing a DevExtreme Widget Instance
 
 You can access a DevExtreme widget instance by using the Angular 2 component query syntax and the component's
 'instance' property. In the example below, the
-[refresh](http://jsserver:8080/Documentation/ApiReference/UI_Widgets/dxDataGrid/Methods/?version=16_1#refresh)
+[refresh](https://js.devexpress.com/Documentation/16_1/ApiReference/UI_Widgets/dxDataGrid/Methods/#refresh)
 method of the dxDataGrid is called:
 
 

examples/app/app.component.html

@@ -25,10 +25,30 @@ <h2>Angular 2 Forms</h2>
             <label for="email">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>
 
-        </div><br/>
+        </div>
         <dx-button text="Submit" (onClick)="onSubmit()"></dx-button>
     </form>
 
+    <h2>DevExtreme validation features</h2>
+    <dx-validation-group>
+        <div class="form-group">
+
+            <label>Email</label>
+            <dx-text-box [(value)]="email">
+                <dx-validator [validationRules]="dxValidationRules.email"></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>
+
+            <dx-validation-summary></dx-validation-summary>
+
+        </div>
+        <dx-button (onClick)="validate($event)" text="Submit"></dx-button>
+    </dx-validation-group>
+
     <h2>Editor Widgets</h2>
 
     <dx-button text="Simple button" (onClick)="boolValue=!boolValue"></dx-button><br/>

examples/app/app.component.ts

@@ -83,6 +83,9 @@ declare let $: any;
         .tabpanel-item  p {
             font-size: 16px;
         }
+        .form-group {
+            margin-bottom: 10px;
+        }
     `],
     templateUrl: 'app/app.component.html',
     providers: [
@@ -99,6 +102,15 @@ export class AppComponent implements OnInit {
     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;
@@ -167,6 +179,14 @@ export class AppComponent implements OnInit {
         console.log('submitted');
         return false;
     }
+    validate(params) {
+        let result = params.validationGroup.validate();
+        if (result.isValid) {
+            alert('Form data is valid');
+        } else {
+            alert('Form data is invalid');
+        }
+    }
     ngOnInit() {
         this.form = new FormGroup({
             emailControl: new FormControl('', Validators.compose([Validators.required, CustomValidator.mailFormat])),

gulpfile.js

@@ -156,7 +156,13 @@ gulp.task('watch.examples', function() {
 
 //------------Testing------------
 
-gulp.task('build.tests', ['build.components'], function() {
+gulp.task('clean.tests', function () {
+    var outputFolderPath = buildConfig.components.testsPath;
+
+    return del([outputFolderPath]);
+});
+
+gulp.task('build.tests', ['build.components', 'clean.tests'], function() {
     var config = buildConfig.components,
         testConfig = buildConfig.tests;