djabif

import { Observable, ReplaySubject } from 'rxjs';
import { first, delay } from 'rxjs/operators';

import { environment } from '../../environments/environment';

export class SubjectFetch<T> {
  private _subject: ReplaySubject<T>;
  private _observable: Observable<T>;
  // We wait on purpose 2 secs on local environment when fetching from json to simulate the backend roundtrip.
  // However, in production you should remove this delay.

djabif

import { PasswordValidator } from '../../validators/password.validator';
this.matching_passwords_group = new FormGroup({
	password: new FormControl('', Validators.compose([
	 	Validators.minLength(5),
	 	Validators.required,
	 	Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$') //this is for the letters (both uppercase and lowercase) and numbers validation
	])),
	confirm_password: new FormControl('', Validators.required)
}, (formGroup: FormGroup) => {
	 return PasswordValidator.areEqual(formGroup);

djabif

<mat-error *ngFor="let validation of account_validation_messages.email">
	<mat-error class="error-message" *ngIf="accountDetailsForm.get('email').hasError(validation.type) && (accountDetailsForm.get('email').dirty || accountDetailsForm.get('email').touched)">{{validation.message}}
	</mat-error>
</mat-error>

djabif

account_validation_messages = {
  'username': [
    { type: 'required', message: 'Username is required' },
    { type: 'minlength', message: 'Username must be at least 5 characters long' },
    { type: 'maxlength', message: 'Username cannot be more than 25 characters long' },
    { type: 'pattern', message: 'Your username must contain only numbers and letters' },
    { type: 'validUsername', message: 'Your username has already been taken' }
  ],
  'email': [
    { type: 'required', message: 'Email is required' },

djabif

<mat-form-field class="full-width">
  <input matInput type="email" placeholder="Email" formControlName="email" required>
  <mat-error *ngFor="let validation of account_validation_messages.email">
    <mat-error class="error-message" *ngIf="accountDetailsForm.get('email').hasError(validation.type) && (accountDetailsForm.get('email').dirty || accountDetailsForm.get('email').touched)">{{validation.message}}</mat-error>
  </mat-error>
</mat-form-field>

djabif

<form [formGroup]="userDetailsForm" (ngSubmit)="onSubmitUserDetails(userDetailsForm.value)">
    <mat-form-field class="full-width">
      <input matInput placeholder="Full Name" formControlName="fullname" required>
      <mat-error *ngFor="let validation of validation_messages.fullname">
        <mat-error class="error-message" *ngIf="userDetailsForm.get('fullname').hasError(validation.type) && (userDetailsForm.get('fullname').dirty || userDetailsForm.get('fullname').touched)">{{validation.message}}</mat-error>
      </mat-error>
    </mat-form-field>
	<button class="submit-btn" color="primary" mat-raised-button type="submit" [disabled]="!userDetailsForm.valid">Submit</button>
</form>

djabif

// user details form validations
this.userDetailsForm = this.fb.group({
	 fullname: ['Homero Simpson', Validators.required ],
	 bio: ["Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s", Validators.maxLength(256)],
	 birthday: ['', Validators.required],
	 gender: new FormControl(this.genders[0], Validators.required),
	 country_phone: this.country_phone_group
});

djabif

<div formGroupName="matching_passwords">
  <mat-form-field class="full-width">
    <input matInput type="password" placeholder="Password" formControlName="password" required>
    <mat-error *ngFor="let validation of account_validation_messages.password">
      <mat-error class="error-message" *ngIf="accountDetailsForm.get('matching_passwords').get('password').hasError(validation.type) && (accountDetailsForm.get('matching_passwords').get('password').dirty || accountDetailsForm.get('matching_passwords').get('password').touched)">{{validation.message}}</mat-error>
    </mat-error>
  </mat-form-field>

  <mat-form-field class="full-width">
    <input matInput type="password" placeholder="Confirm Password" formControlName="confirm_password"  [errorStateMatcher]="parentErrorStateMatcher" required>

djabif

import { FormControl, FormGroup, NgForm, FormGroupDirective } from '@angular/forms';

export class PasswordValidator {
  // Inspired on: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview
  static areEqual(formGroup: FormGroup) {
    let value;
    let valid = true;
    for (let key in formGroup.controls) {
      if (formGroup.controls.hasOwnProperty(key)) {
        let control: FormControl = <FormControl>formGroup.controls[key];

djabif

//Complete example for Ionic Framework in: https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic
//Complete example for Angular in: https://angular-templates.io/tutorials/about/angular-forms-and-validations

import { AbstractControl, ValidatorFn } from '@angular/forms';
import * as libphonenumber from 'google-libphonenumber';

export class PhoneValidator {

  // Inspired on: https://github.com/yuyang041060120/ng2-validation/blob/master/src/equal-to/validator.ts
  static validCountryPhone = (countryControl: AbstractControl): ValidatorFn => {