Angular2：通过比较两个字段

Question

这是我的组件类

import { Component, OnInit   } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';

import { Registration } from './registration.interface';
@Component({
moduleId: module.id,
selector: 'registration',
templateUrl: 'registration.component.html'
})
export class RegistrationComponent implements OnInit {
registration: FormGroup;

constructor(private fb: FormBuilder) {

}

ngOnInit() {
    this.registration = this.fb.group({
        email: new FormControl('', Validators.required),
        password: new FormControl('', [Validators.required, Validators.minLength(2)]),
        confirmPassword: new FormControl('', [Validators.required, Validators.minLength(2)])
    }, { validator: this.passwordConfirming });
}


passwordConfirming(c: AbstractControl) {

   // this.registration.valid = c.get('password').value === c.get('confirmPassword').value;

   // console.log(c.get('password').value);
    console.log(c.get('password').value === c.get('confirmPassword').value);
    return c.get('password').value === c.get('confirmPassword').value;


}


onSubmit({ value, valid }: { value: Registration, valid: boolean }) {
    console.log(value, valid);
}
}

这是我的html模板

<div class="row vertical-offset-100">
<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Registration</h3>
        </div>
        <div class="panel-body">
            <form  novalidate (ngSubmit)="onSubmit(registration)" [formGroup]="registration">
                <fieldset>
                    <div class="form-group">
                        <label>
                            <span>Email</span>
                            <input class="form-control" type="text" placeholder="Email" formControlName="email">
                        </label>

                        <div class="error" *ngIf="registration.get('email').touched && registration.get('email').hasError('required')">
                            Email is required
                        </div>
                    </div>
                    <div class="form-group">
                        <label>
                            <span>Password</span>
                            <input class="form-control" type="password" placeholder="Password" formControlName="password">
                        </label>
                        <div class="error"
                             *ngIf="registration.get('password').hasError('required') && registration.get('password').touched">
                            Password is required
                        </div>
                        <div class="error" *ngIf="registration.get('password').hasError('minlength') && registration.get('password').touched">
                            Minimum of 2 characters
                        </div>
                    </div>
                    <div class="form-group">
                        <label>
                            <span>Confirm Password</span>
                            <input class="form-control" type="password" placeholder="Confirm Password" formControlName="confirmPassword">
                        </label>
                        <div class="error"
                             *ngIf="registration.get('confirmPassword').hasError('required') && registration.get('confirmPassword').touched">
                            Password is required
                        </div>
                        <div class="error" *ngIf="registration.get('confirmPassword').hasError('minlength') && registration.get('confirmPassword').touched">
                            Minimum of 2 characters
                        </div>
                        <div class="error" *ngIf="registration.get('confirmPassword').value != registration.get('password').value && registration.get('confirmPassword').touched">
                            Password Mismatch
                        </div>
                    </div>

                    <button class="btn btn-lg btn-success btn-block" type="submit" [disabled]="registration.invalid">Sign up</button>
                </fieldset>
            </form>
            <p>Valid?: {{registration.valid}}</p>
            <p>InValid?: {{registration.invalid}}</p>
        </div>
    </div>
</div>
</div>

但它不依赖于验证器功能。它总是有效的。我正在使用角度2.4