<div class="site-section">

<div class="container">
<div class="row">
<div class="col-lg-12">
<form [formGroup]="inscriForm">
<div class="form-group">
Tel: <input type="number" class="form-control"
formControlName="tel"
placeholder="Insert your Phone Number Please">
</div>
<div
*ngIf="inscriForm.controls['tel'].invalid &&
(inscriForm.controls['tel'].touched ||inscriForm.controls['tel'].dirty) ">
<div
*ngIf="inscriForm.controls['tel'].errors.required" class="red">Phone is
required
</div>
<div
*ngIf="inscriForm.controls['tel'].errors.minlength" class="red">Phone Number
must have
at least 8 number</div>
<div class="form-group">
Password : <input type="password" class="form-
control" formControlName="pwd"
placeholder=" Insert your password Please">
</div>
<div
*ngIf="inscriForm.controls['pwd'].invalid &&
(inscriForm.controls['pwd'].touched ||inscriForm.controls['pwd'].dirty) ">
<div
*ngIf="inscriForm.controls['pwd'].errors.required" class="red">Password
required</div>
<div
*ngIf="inscriForm.controls['pwd'].errors.minlength" class="red">Password must
have at
least
10 chars</div>
<div
*ngIf="inscriForm.controls['pwd'].errors.maxlength" class="red">Password must
have at
must
14 chars</div>
</div>
<div class="form-group">
Nom : <input type="text" class="form-control"
formControlName="name"
placeholder="Insert your First Name Please">
</div>
<div
 *ngIf="inscriForm.controls['name'].invalid &&
(inscriForm.controls['name'].touched ||inscriForm.controls['name'].dirty) ">
<div
*ngIf="inscriForm.controls['name'].errors.required" class="red">Nom is
required
</div>
<div
*ngIf="inscriForm.controls['name'].errors.minlength" class="red"> Nom must
have
at least 3 chars</div>
</div>
<div class="form-group">
Prenom : <input type="text" class="form-control"
formControlName="prenom"
placeholder="Insert your First Name Please">
</div>
<div
*ngIf="inscriForm.controls['prenom'].invalid &&
(inscriForm.controls['prenom'].touched ||inscriForm.controls['prenom'].dirty)
">
<div
*ngIf="inscriForm.controls['prenom'].errors.required" class="red">Prenom is
required
</div>
<div
*ngIf="inscriForm.controls['prenom'].errors.minlength" class="red"> Prenom
must have
at least 5 chars</div>
</div>

<div class="form-group">
<button (click)="inscri()"
[disabled]="inscriForm.invalid"
class="btn btn-primary py-3 px-5">
s'inscrire</button>
</div>
</div>
</form>
</div>
</div>

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

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-inscription',
templateUrl: './inscription.component.html',
styleUrls: ['./inscription.component.css']
})
export class InscriptionComponent implements OnInit {
inscriForm:FormGroup

constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
this.inscriForm = this.formBuilder.group(
{
tel: ["", [Validators.required, Validators.maxLength(8)]],
pwd: ["", [Validators.required, Validators.minLength(10),
Validators.maxLength(14)]],
name: ["", [Validators.required, Validators.minLength(3)]],
prenom: ["", [Validators.required, Validators.minLength(5)]],

})
}
inscri(){
console.log(this.inscriForm.value)
}
}

var request = require("request");