角型カスタム検証

Question

登録フォームにpasswordとconfirm_passwordフィールドがあります。これらのパスワードが同じであることを確認するカスタム検証があります。事は：passwordフィールドに「qwerty123」と入力し、password_confirmフィールドにはqwerty123と入力しても問題ありません。しかし、たとえばフィールドに4のような文字を追加してから、passwordフィールドに同じ文字4を追加すると、フォームは有効ではありません（プロパティvalidはfalseです）、何もできません。

私はここで似たような解決策を見ましたが、そこに役立つものは私には役に立ちません。

マイコンポーネント：

public userNameInput: FormControl = new FormControl('', [ 
    Validators.minLength(this.limits['username'][0]), 
    Validators.maxLength(this.limits['username'][1]) 
    ]); 
    public emailInput: FormControl = new FormControl('', [ 
    Validators.required, 
    RegisterFormComponent.checkEmail 
    ]); 
    public passwordInput: FormControl = new FormControl('', [ 
    Validators.required, 
    Validators.minLength(this.limits['password'][0]), 
    Validators.maxLength(this.limits['password'][1]), 
    RegisterFormComponent.checkPasswordsMatching 
    ]); 
    public confirmPasswordInput: FormControl = new FormControl('', [ 
    Validators.required, 
    RegisterFormComponent.checkPasswordsMatching 
    ]); 

    public registrationForm: FormGroup = this.formBuilder.group({ 
    userName: this.userNameInput, 
    email: this.emailInput, 
    password: this.passwordInput, 
    confirmPassword: this.confirmPasswordInput 
    }); 

    private static checkPasswordsMatching(input: FormControl): null | { [ key: string ]: boolean } { 
    if (!input.root || !input.root.get('password')) { 
     return null; 
    } 

    return (
     (
     input.root.get('password').value === '' || 
     input.root.get('confirmPassword').value === '' 
    ) 
     || 
     input.root.get('password').value === 
     input.root.get('confirmPassword').value 
    ) 
     ? null 
     : { mismatched: true }; 
    } 

テンプレートからの私のHTML：

<input 
    type="text" 
    name="username" 
    id="username" 
    [formControl]="userNameInput" 
    [class.error]=" 
    userNameInput.hasError('minlength') || 
    userNameInput.hasError('maxlength') 
    " 
> 
<input 
    id="email" 
    type="text" 
    name="email" 
    [formControl]="emailInput" 
    [class.error]=" 
    !emailInput.pristine && 
    emailInput.hasError('invalid') 
    " 
> 
<input 
    type="password" 
    name="password" 
    id="password" 
    [formControl]="passwordInput" 
    [class.error]=" 
    passwordInput.hasError('minlength') || 
    passwordInput.hasError('maxlength') || 
    confirmPasswordInput.hasError('mismatched') 
    " 
> 
<input 
    type="password" 
    name="password_confirm" 
    id="password_confirm" 
    [formControl]="confirmPasswordInput" 
    [class.error]=" 
    passwordInput.hasError('mismatched') || 
    confirmPasswordInput.hasError('mismatched') 
    " 
> 
<button 
    [disabled]="!registrationForm.valid" 
>Confirm</button> 

Answer 1

角度が一人のユーザが現在に入力しているだけで、他の入力にバリデータを再実行していないためです。他の入力のバリデーターをupdateValueAndValidityで再実行することができます。