Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ion-header>
- <ion-navbar>
- <ion-title>
- Authorization Form Demo
- </ion-title>
- </ion-navbar>
- </ion-header>
- <ion-content class="home" padding>
- <form [ngFormModel]="authForm" (ngSubmit)="onSubmit(authForm.value)">
- <ion-item [class.error]="!username.valid && username.touched">
- <ion-label floating>Username</ion-label>
- <ion-input type="text" value="" [ngFormControl]="username"></ion-input>
- </ion-item>
- <div *ngIf="username.hasError('required') && username.touched"
- class="error-box">* Username is required!</div>
- <div *ngIf="username.hasError('minlength') && username.touched"
- class="error-box">* Minimum username length is 8!</div>
- <div *ngIf="username.hasError('checkFirstCharacterValidator') && username.touched"
- class="error-box">* Username cant't start with number!</div>
- <ion-item [class.error]="!password.valid && password.touched">
- <ion-label floating>Password</ion-label>
- <ion-input type="text" value="" [ngFormControl]="password" ></ion-input>
- </ion-item>
- <div *ngIf="password.hasError('required') && password.touched"
- class="error-box">* Password is required</div>
- <div *ngIf="password.hasError('minlength') && password.touched"
- class="error-box">* Minimum password length is 8!</div>
- <div *ngIf="password.hasError('checkFirstCharacterValidator') && password.touched"
- class="error-box">* Password cant't start with number!</div>
- <br/><br/>
- <button type="submit" class="custom-button" [disabled]="!authForm.valid" block>Submit</button>
- </form>
- </ion-content>
- import {Component} from '@angular/core';
- import {NavController} from 'ionic-angular';
- import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '@angular/common';
- import {CustomValidators} from '../validators/CustomValidators';
- @Component({
- templateUrl: 'build/pages/form/form.html',
- directives: [FORM_DIRECTIVES]
- })
- export class FormPage {
- authForm: ControlGroup;
- username: AbstractControl;
- password: AbstractControl;
- constructor(private navController: NavController, private fb: FormBuilder) {
- this.authForm = fb.group({
- 'username': ['', Validators.compose([Validators.required, Validators.minLength(8), CustomValidators.checkFirstCharacterValidator])],
- 'password': ['', Validators.compose([Validators.required, Validators.minLength(8), CustomValidators.checkFirstCharacterValidator])]
- });
- this.username = this.authForm.controls['username'];
- this.password = this.authForm.controls['password'];
- }
- onSubmit(value: string): void {
- if(this.authForm.valid) {
- console.log('Submitted value: ', value);
- }
- }
- }
- import { Control, ControlGroup } from "@angular/common";
- interface ValidationResult {
- [key: string]: boolean;
- }
- export class CustomValidators {
- public static checkFirstCharacterValidator(control: Control): ValidationResult {
- var valid = /^d/.test(control.value);
- if (valid) {
- return {checkFirstCharacterValidator: true};
- }
- return null;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement