Hi all!
Can anybody share with working ig-validator angular 2 config sample.
Thanks.
Hello Roman,
The validator requires element with specified id selector as a target on which it can be initialized.
I'm attaching a sample demonstrating the validator, please review it and let me know if you have further questions.
Hello, DeyanK.
Thanks for answer
How I can [igValidator] subscribe on form' submit event.
<form id="validator1" (ngReset)="close()"> <div class="group-fields"> <label for="login">Username</label> <ig-text-editor width="100%" [(ngModel)]="model.username" name="username" required></ig-text-editor> </div> <div class="group-fields"> <label for="password">Password</label> <ig-text-editor textMode="password" placeHolder="********" width="100%" [(ngModel)]="model.password" name="password" required></ig-text-editor> </div> <div class="ui-dialog-buttonpane" style="float: right"> <button type="submit">Enter</button> <button type="reset">Cancel</button> </div> </form> <ig-validator [widgetId]='id' [options]="validatorOptions"></ig-validator>
import { AfterViewInit, Component, ViewChild } from '@angular/core';import { Router } from '@angular/router';import { AuthHttp } from 'angular2-jwt';import { AuthService } from '../services/index';declare var $: any;@Component({ selector: 'app-login', styleUrls: ['login.component.css'], templateUrl: 'login.component.html'})export class LoginComponent implements AfterViewInit { private model: any = {}; private validatorOptions: any; private id: string = 'validator1'; constructor( private authService: AuthService, private http: AuthHttp, private router: Router) { this.validatorOptions = { onsubmit: true, successMessage: "Valid" } } ngAfterViewInit() { $("#app-login button").button(); } login() { this.authService.login(this.model.username, this.model.password) ; } }
Hello,
The approach looks correct, but what's left is to specify the fields and the validation logic.
I modified my sample to demonstrate this. It is validating on submit.
Hi, Deyank!
How I can call igValidator.isValid() method.
And if igValidator if valid --> then submit form.
<ig-dialog id="app-login" [options]="dialogOptions"> <form id="loginForm" (ngSubmit)="login()" > <div class="group-fields"> <label for="login">Пользователь</label> <ig-text-editor [widgetId]="loginId" width="100%" [(ngModel)]="model.username" name="login"></ig-text-editor> </div> <div class="group-fields"> <label for="password">Пароль</label> <ig-text-editor [widgetId]="passwordId" [textMode]="'password'" [placeHolder]="'********'" [width]="'100%'" [(ngModel)]="model.password" name="password"></ig-text-editor> </div> <div class="ui-dialog-buttonpane" style="float: right"> <button type="submit">Вход</button> <button type="reset" (click)="close()">Отмена</button> </div> </form> <ig-validator #validator [widgetId]='formId' [options]="validatorOptions"></ig-validator></ig-dialog>
login() { // detect igValidstor is valid ...............
}