I'm struggling to set up new password and confirm password validation in Angular 4. As a novice in Angular, I've attempted various approaches but keep encountering the same error. Seeking guidance on where my mistake lies. Any help in resolving this issue would be greatly appreciated to ensure my code functions properly.
password.ts
import { Component, Injectable } from '@angular/core';
import { IonicPage, NavController, NavParams, PopoverController } from 'ionic-angular';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { RequestOptions } from '@angular/http';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';
import { NgForm } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
@IonicPage()
@Component({
selector: 'page-password',
templateUrl: 'password.html',
})
export class PasswordPage {
constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, public popoverCtrl: PopoverController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad PasswordPage');
}
public Credentials: FormGroup;
ngOnInit() {
this.Credentials = new FormGroup({});
this.Credentials.addControl('Password', new FormControl('', [Validators.required]));
this.Credentials.addControl('Confirmation', new FormControl('', [Validators.compose([Validators.required, this.validateAreEqual.bind(this)])]));
}
private validateAreEqual(fieldControl: FormControl) {
return fieldControl.value === this.Credentials.get("Password").value ? null : { NotEqual: true };
}
password.html
<ion-content padding>
<div class="loginContainer">
<div class="centerLogo">
<h1>
<a href="#">
<img src="images/logomaster.jpg" alt="" />
</a>
</h1>
</div>
<form #fm="ngForm" (ngSubmit)="test(fm)" novalidate>
<ul id="tabs">
<li (click)="showemail=false">
<a id="tab2">Set your PIN</a>
</li>
</ul>
<div class="form-group row" formGroupName="passwords" id="tab2C">
<div class="form-group">
<ion-item>
<ion-input type="password" class="form-control" formControlName="password" title="Please enter your password"></ion-input>
</ion-item>
</div>
<div class="form-group">
<ion-item>
<ion-input type="password" class="form-control" formControlName="confirmedPassword" title="Please re-enter your password"></ion-input>
</ion-item>
</div>
<div class="btnRow">
<input class="loginBtn" type="submit" id="phoneBtn" value="Continue" />
</div>
</div>
</form>
</div>
</ion-content>