* ngIf按預期工作

Question

如何獲得以下功能？它總是返回一個真實的條件（即即使密碼1 & password2是相同的，也總是顯示錯誤）。

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

感謝

整個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']; 
    } 

Answer 1

嘗試增加雙向數據綁定到您的密碼輸入，這樣的：

[(ngFormControl)]="password1"

順便說一句，ngFormControl和ngFormModel現在已被棄用。

這裏的工作示例：（這是很簡單的，我只是想測試，如果* ngIf指令將工作）：

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>