Cacher is the code snippet organizer for pro developers

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { FormBuilder } from '@angular/forms';

@Component({
	selector: 'my-app',
	template: `
    <form [formGroup]="form" novalidate
          (ngSubmit)="save(myForm.value, myForm.valid)">
          (ngSubmit)="save(myForm.value, myForm.valid)">
      <div formGroupName="name">
        <input formControlName="first" placeholder="First">
        <input formControlName="last" placeholder="Last">
      </div>
      <input formControlName="email" placeholder="Email">
      <button>Submit</button>
    </form>
    <p>Value: {{ form.value | json }}</p>
    <p>Validation status: {{ form.status }}</p>
 `
})
export class AppComponent implements OnInit {
	form: FormGroup;

	constructor(private fb: FormBuilder) { }

	ngOnInit(): void {
		// On initialise notre formulaire piloté par le modèle
		this.form = fb.group({
			'name': fb.group({
				first: ['',
					Validators.compose([Validators.required, Validators.minLength(3)])],
				last: ['',
					Validators.compose([Validators.required, Validators.minLength(3)])]
			}),
			email: ['',
				Validators.pattern('^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$')]
		});
	}
}

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
	selector: 'my-app',
	template: `
    <form [formGroup]="form" novalidate
          (ngSubmit)="save(myForm.value, myForm.valid)">
          (ngSubmit)="save(myForm.value, myForm.valid)">
      <div formGroupName="name">
        <input formControlName="first" placeholder="First">
        <input formControlName="last" placeholder="Last">
      </div>
      <input formControlName="email" placeholder="Email">
      <button>Submit</button>
    </form>
    <p>Value: {{ form.value | json }}</p>
    <p>Validation status: {{ form.status }}</p>
 `
})
export class AppComponent implements OnInit {
	form: FormGroup;

	ngOnInit(): void {
		// On initialise notre formulaire piloté par le modèle
		this.form = new FormGroup({
			'name': new FormGroup({
				first: new FormControl('',
					Validators.compose([Validators.required, Validators.minLength(3)])),
				last: new FormControl('',
					Validators.compose([Validators.required, Validators.minLength(3)]))
			}),
			email: new FormControl('',
				Validators.pattern('^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$'))
		});
	}
}

/***********
* EXERCICE *
************/

/*

Voici les instructions, le formulaire sera composé des cinq champs suivants :

• Un champ firstname, qui fera partie du groupe de contrôle 'name'.
• Un champ lastname, qui fera partie du groupe de contrôle 'name'.
• Un champ email.
• un champ password, qui fera partie du groupe de contrôle 'verification'.
• Un champ passwordConfirm, qui fera partie du groupe de contrôle
'verification'.

 */

ngOnInit(): void {
	this.form = fb.group({
		name: fb.group({
			firstname: ['', Validators.compose(
				[Validators.required,
				Validators.minLength(3),
				Validators.maxLength(25)])],
			lastname: ['', Validators.compose(
				[Validators.required,
				Validators.minLength(3),
				Validators.maxLength(25)])]
		}),
		email: ['', Validators.pattern('^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$')],
		verification: fb.group({
			password: ['', Validators.compose([Validators.required, Validators.minLength(8)])],
			passwordConfirm: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
		}, passwordMatchValidator)
	});
}

import { FormGroup, ValidatorFn } from '@angular/forms';

export function strongPasswordValidator(): ValidatorFn {
	return (control: AbstractControl): { [key: string]: any } => {
        // on utilise une expression régulière pour la validation
		var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
        
        // on récupère le mot de passe du champ 'control' passé en paramètre
		const password = control.value;
		// on teste le mot de passe avec l'expression régulière
		const valid = strongRegex.test(password);
		// on retourne null si le mot de passe est assez fort, 
		// et un dictionnaire d'erreur sinon.
		return valid ? null : { 'strongPasswordError': { password } };
	};
}