La forme réactive Angular2 confirme l'égalité des valeurs

J'essaie de créer un formulaire réactif Angular2 où je dois confirmer l'adresse e-mail saisie par l'utilisateur. Voici un lien vers le plunker

import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { User } from './signup.interface'; @Component({ selector: 'signup-form', template: ` <form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user"> <label> <span>Full name</span> <input type="text" placeholder="Your full name" formControlName="name"> </label> <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('required')"> Name is required </div> <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('minlength')"> Minimum of 2 characters </div> <div formGroupName="account"> <label> <span>Email address</span> <input type="email" placeholder="Your email address" formControlName="email"> </label> <div class="error" *ngIf="user.get('account').get('email').hasError('required') && user.get('account').get('email').touched"> Email is required </div> <label> <span>Confirm address</span> <input type="email" placeholder="Confirm your email address" formControlName="confirm"> </label> <div class="error" *ngIf="user.get('account').get('confirm').hasError('required') && user.get('account').get('confirm').touched"> Confirming email is required </div> </div> <button type="submit" [disabled]="user.invalid">Sign up</button> </form> ` }) export class SignupFormComponent implements OnInit { user: FormGroup; constructor() {} ngOnInit() { this.user = new FormGroup({ name: new FormControl('', [Validators.required, Validators.minLength(2)]), account: new FormGroup({ email: new FormControl('', Validators.required), confirm: new FormControl('', Validators.required) }) }); } onSubmit({ value, valid }: { value: User, valid: boolean }) { console.log(value, valid); } }

Je souhaite afficher une erreur lorsque ces 2 champs de messagerie ne correspondent pas.

Comment puis-je créer une telle validation pour ce comportement en utilisant des formes réactives dans angular2?

J'ai vu une publication qui fait cela en utilisant une approche axée sur le modèle, mais je n'ai pas été en mesure de comprendre comment je pourrais le faire en utilisant une approche de forme réactive.

J'ai fait une correspondance par mot de passe en utilisant des formes réactives. Vous pouvez le modifier pour le courrier électronique. Il suffit de changer le valideur pour les e-mails au lieu du mot de passe. Les deux sont des chaînes, tout le reste est identique et mettent errormatch error dans email. Cela fonctionnera

App.module.ts

Ajoutez ces fichiers dans votre fichier app.module.ts pour utiliser des formulaires réactifs

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, ], declarations: [ AppComponent ] providers: [], bootstrap: [ AppComponent ] }) export class AppModule {}

App.component.ts

 import { Component,OnInit } from '@angular/core'; import template from './add.component.html'; import { FormGroup,FormBuilder,Validators } from '@angular/forms'; import { matchingPasswords } from './validators'; @Component({ selector: 'app', template }) export class AppComponent implements OnInit { addForm: FormGroup; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.addForm = this.formBuilder.group({ username: ['', Validators.required], email: ['', Validators.required], role: ['', Validators.required], password: ['', Validators.required], password2: ['', Validators.required] }, { validator: matchingPasswords('password', 'password2') <-- replace args with email_1 and email_2 }) }; addUser() { if (this.addForm.valid) { var adduser = { username: this.addForm.controls['username'].value, email: this.addForm.controls['email'].value, password: this.addForm.controls['password'].value, profile: { role: this.addForm.controls['role'].value, name: this.addForm.controls['username'].value, email: this.addForm.controls['email'].value } }; console.log(adduser);// adduser var contains all our form values. store it where you want this.addForm.reset();// this will reset our form values to null } } }

App.component.html

 <div> <form [formGroup]="addForm"> <input type="text" placeholder="Enter username" formControlName="username" /> <input type="text" placeholder="Enter Email Address" formControlName="email"/> <input type="password" placeholder="Enter Password" formControlName="password" /> <input type="password" placeholder="Confirm Password" name="password2" formControlName="password2"/> <div class='error' *ngIf="addForm.controls.password2.touched"> <div class="alert-danger errormessageadduser" *ngIf="addForm.hasError('mismatchedPasswords')"> Passwords do not match </div> </div> <select name="Role" formControlName="role"> <option value="admin" >Admin</option> <option value="Accounts">Accounts</option> <option value="guest">Guest</option> </select> <br/> <br/> <button type="submit" (click)="addUser()"><span><i class="fa fa-user-plus" aria-hidden="true"></i></span> Add User </button> </form> </div>

Valides.ts

 export function matchingPasswords(passwordKey: string, confirmPasswordKey: string) { return (group: ControlGroup): { [key: string]: any } => { let password = group.controls[passwordKey]; let confirmPassword = group.controls[confirmPasswordKey]; if (password.value !== confirmPassword.value) { return { mismatchedPasswords: true }; } } }