góc 2 validator không làm việc như mong đợi

Question

tôi đã xác nhận điều này:

export const PasswordsEqualValidator =(): ValidatorFn => { 

    return (group: FormGroup): Observable<{[key: string]: boolean}> => { 

    const passwordCtrl: FormControl = <FormControl>group.controls.password; 
    const passwordAgainCtrl: FormControl = <FormControl>group.controls.passwordAgain; 

    const valid = passwordCtrl.value.password === passwordAgainCtrl.value.passwordAgain; 

    return Observable.of(valid ? null : { 
     passwordsEqual: true 
    }); 
    }; 
}; 

nào được sử dụng theo hình thức này:

public signupForm: FormGroup = this.fb.group({ 
    email: ['', Validators.required], 
    passwords: this.fb.group({ 
     password: ['', Validators.required], 
     passwordAgain: ['', Validators.required] 
    }, {validator: CustomValidators.passwordsEqual()}) 
    }); 

Một phần của mẫu trong đó sử dụng nó:

<div formGroupName="passwords"> 
    <div class="form-control" [ngClass]="{error: !signupForm.get('passwords').valid}"> 
    <label class="label" for="password">Password</label> 
    <input class="input" id="password" formControlName="password" type="password"> 
    </div> 
    <div class="form-control" [ngClass]="{error: !signupForm.get('passwords').valid}"> 
    <label class="label" for="password-again">Password again</label> 
    <input class="input" id="password-again" formControlName="passwordAgain" type="password"> 
    </div> 
</div> 

Vấn đề là ngay cả khi mật khẩu khớp, nó vẫn hiển thị lỗi. Tôi đã xem xét một số câu hỏi tương tự khác nhau nhưng hầu hết các em có chút lộn xộn và lỗi thời vì vậy tôi muốn viết một giải pháp sạch hơn.

Tôi đoán chỉ có một điều chỉnh nhỏ cần thiết nhưng tôi dường như không thể tìm ra.

Answer 1

thử điều này, bởi vì bạn cần so sánh giá trị 2 và validator không phải là async validator, bạn có thể trở lại chỉ boolean thay vì Quan sát

export const PasswordsEqualValidator =(): ValidatorFn => { 

    return (group: FormGroup): boolean => { 

    const passwordCtrl: FormControl = <FormControl>group.controls.password; 
    const passwordAgainCtrl: FormControl = <FormControl>group.controls.passwordAgain; 

    const valid = passwordCtrl.value === passwordAgainCtrl.value; 

    return valid ? null : { 
     passwordsEqual: true 
    }; 
    }; 
}; 

btw, sử dụng phương pháp này cho thực hành tốt nhất:

export const PasswordsEqualValidator =(): ValidatorFn => { 

    return (group: FormGroup): boolean => { 

    const passwordCtrl: FormControl = group.get('password'); 
    const passwordAgainCtrl: FormControl = group.get('passwordAgain'); 

    const valid = passwordCtrl.value === passwordAgainCtrl.value; 

    return valid ? null : { 
     passwordsEqual: true 
    }; 
    }; 
}; 

bản demo tại đây: http://plnkr.co/edit/9PzGSIuBhvNz0fpJxTlS?p=preview