*ngIf not working as expected

Question

How do I get the following to work? It always returns a true condition (i.e. always displays the error even if password 1 & password2 are the same).

<div *ngIf="password2 != password1 && password2.touched" class="error-box">* Passwords must match!</div>

Thanks

entire html:

<ion-content padding>
    <form [ngFormModel]="authForm" (ngSubmit)="onSubmit(authForm.value)">
        <ion-item [class.error]="!username.valid && username.touched">
            <ion-label floating>Username</ion-label>
            <ion-input type="text" value="" [(ngFormControl)]="username"></ion-input>
        </ion-item>
        <div *ngIf="username.hasError('required') && username.touched" class="error-box">* Username is required!</div>
        <div *ngIf="username.hasError('minlength') && username.touched" class="error-box">* Minimum username length is 3!</div>
        <div *ngIf="username.hasError('maxlength') && username.touched" class="error-box">* Maximum username length is 25!</div>
        <div *ngIf="username.hasError('checkFirstCharacterValidator') && username.touched" class="error-box">* Username cant't start with number!</div>

        <ion-item [class.error]="!password1.valid && password1.touched">
            <ion-label floating>Password</ion-label>
            <ion-input type="password" value="" [(ngFormControl)]="password1"></ion-input>
        </ion-item>
        <div *ngIf="password1.hasError('required') && password1.touched" class="error-box">* Password is required</div>
        <div *ngIf="password1.hasError('minlength') && password1.touched" class="error-box">* Minimum password length is 6!</div>
        <div *ngIf="password1.hasError('maxlength') && password1.touched" class="error-box">* Maximum password length is 25!</div>

        <ion-item [class.error]="!password2.valid && password2.touched">
            <ion-label floating>Confirm Password</ion-label>
            <ion-input type="password" value="" [(ngFormControl)]="password2"></ion-input>
        </ion-item>
        <div *ngIf="password2.hasError('required') && password2.touched" class="error-box">* Password is required</div>
        <div *ngIf="password2.hasError('minlength') && password2.touched" class="error-box">* Minimum password length is 6!</div>
        <div *ngIf="password2.hasError('maxlength') && password2.touched" class="error-box">* Maximum password length is 25!</div>
        <div *ngIf="password2 != password1 && password2.touched" class="error-box">* Passwords must match!</div>

        <br/><br/>
        <button type="submit" primary [disabled]="!authForm.valid" block class="form-button-text">Next</button>
    </form>
</ion-content>

ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '@angular/common';
import {Validator} from '../validator/validator';
import {CategoryPage} from '../category/category';
import { EmployeeModel } from '../model/EmployeeModel';

@Component({
  templateUrl: 'build/pages/register/register.html',
  directives: [FORM_DIRECTIVES]
})

export class RegisterPage {

  authForm: ControlGroup;
  username: AbstractControl;
  password1: AbstractControl;
  password2: AbstractControl;
  passwordGroup: AbstractControl;

  constructor(private nav: NavController, private fb: FormBuilder, private employeeModel: EmployeeModel) {
    this.authForm = fb.group({
      'username': ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.required, Validators.maxLength(25), Validator.checkFirstCharacterValidator])],
      'password1': ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(25)])],
      'password2': ['', Validators.compose([Validators.required, Validators.minLength(6)])],
    });

    this.username = this.authForm.controls['username'];
    this.password1 = this.authForm.controls['password1'];
    this.password2 = this.authForm.controls['password2'];
  }

I have never seen a notation where you use `*` like that.. But should that not be `ng-if="password2 != password1 && password2.touched"` -- I also notice that the second `*` in your code above is after the closing `>` in the HTML, is that right? — Nicholas Robinson, Aug 05 '16 at 13:20
@NicholasRobinson This is angular 2 where the syntax is completely different. — Chrillewoodz, Aug 05 '16 at 13:31

Stefan Svrkota · Answer 1 · 2016-08-05T14:29:58.527

Try adding two-way data binding to your password inputs, like this:

[(ngFormControl)]="password1"

By the way, ngFormControl and ngFormModel are now deprecated.

Here's the working example: (it is really simple, I just wanted to test if *ngIf directive would work):

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { disableDeprecatedForms, provideForms } from '@angular/forms'
bootstrap(AppComponent, [
disableDeprecatedForms(),
provideForms()
]);

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
})
export class AppComponent {
name: string = "";
pass1: string = "";
pass2: string = "";
onSubmitLogin() {
    console.log("LOGIN!");
}
}

app.component.html

<form #loginForm="ngForm" (ngSubmit)="onSubmitLogin()">
<label for="name">Username:</label>
<input type="text" [(ngModel)]="name" name="name" required />
<label for="pass1">Password:</label>
<input type="password" [(ngModel)]="pass1" name="pass1" required />
<label for="pass2">Confirm password:</label>
<input type="password" [(ngModel)]="pass2" name="pass2" required />
<button type="submit" class="btn btn-primary">Submit</button>

<div *ngIf="pass1 != pass2" align="center">
    PASSWORDS ARE NOT THE SAME
</div>
</form>

index.html

<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Angular 2 Tour of Heroes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
 <!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

Hi Stefan, thanks for your advise. If `ngFormControl` and `ngFormModel` are depricated, what should I use instead?Thanks — Richard, Aug 05 '16 at 13:41
For your Form tag, you should use `#yourFormName="ngForm"` and in your input tags you should use `[(ngModel)]="password1"`. — Stefan Svrkota, Aug 05 '16 at 13:45
Adding the brackets to make it `[(ngFormControl)]="password1"` makes no difference. — Richard, Aug 05 '16 at 13:45
You should also add `[(ngFormControl)]="password2"`. Do you have string type variables with names password1 and password2 in your component.ts file? You didn't add your .ts file, so I can't say. — Stefan Svrkota, Aug 05 '16 at 13:48
I have now added the ts file to the original question...as you can see I do have `[(ngFormControl)]="password2"` now, but no change in result. — Richard, Aug 05 '16 at 13:53
May be a solution here: http://stackoverflow.com/questions/35474991/angular-2-form-validating-for-repeat-password/35475248#35475248 — Richard, Aug 05 '16 at 14:00

*ngIf not working as expected

1 Answers1