Angular 4自定義表單驗證不觸發

我想創建自定義驗證來驗證密碼是否相同，但問題是自定義驗證程序不觸發。對不起，我無法分享plunkr。Angular 4自定義表單驗證不觸發

//這裏是註冊組件（進口）

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from "@angular/forms"; 
import { confirmPass } from '../confirm-password.validator'; 


register_form: FormGroup; 

    constructor(
    private _fb: FormBuilder 
) { 
    this.register_form = this._fb.group({ 
     'name': ['', Validators.required], 
     'surname': ['', Validators.required], 
     'email': ['', [Validators.required, Validators.pattern('/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/')]], 
     'password': ['', [Validators.required, Validators.minLength(8)]], 
     'confirm_password': ['', [Validators.required, confirmPass]], 
     'phone': ['', Validators.required], 
     'birth_date': ['', Validators.required] 
    },) 
    }

//驗證功能

import { AbstractControl, ValidatorFn } from "@angular/forms"; 

export function confirmPass(controller): ValidatorFn { 
    return (control: AbstractControl): { [key: string]: any } => { 
     console.log(controller.root.controls['password']); 
     if (controller.value == controller.root.get('password').value) { 
      return null; 
     } 
     return { 'error': { value: controller.value } }; 
    }; 
}

來源

2017-08-12 Jamil Alisgenderov

還不確定，但是在驗證器檢查中，一條建議使用===而不是==。與我的最小/最大驗證器相比，我也只是相當於return {'confirmPass'：{controller.value}}而在主代碼中，它需要validators數組中的confirmPass（）嗎？ – JGFMK

感謝'==='的東西，不需要使用「（）」，就像我從例子中看到的那樣。 –

你需要添加密碼和確認密碼，組

所以你的功能應該是這樣的。

this.register_form = this._fb.group({ 
    'name': ['', Validators.required], 
    'surname': ['', Validators.required], 
    'email': ['', [Validators.required, Validators.pattern('/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/')]], 
    'password_group':this.formBuilder.group(
    { 
    'password': ['', [Validators.required, Validators.minLength(8)]], 
    'confirm_password': ['', [Validators.required, confirmPass]] 
    }, 
    { 
    validator: this.passwordConfirming 
    }), 
    'phone': ['', Validators.required], 
    'birth_date': ['', Validators.required] 
})

密碼驗證功能

passwordConfirming(c: AbstractControl): { invalid: boolean } { 
    if (c.get('password').value !== c.get('confirm_password').value) { 
    return {invalid: true}; 
    } 
}

也，你需要formGroupName成HTML

例如：

<div class="form-group row" formGroupName="passwords"> 
// here your pwd and confirmation pwd input 
<div>

來源

2017-08-12 10:40:37

我要試一下。但是我的代碼出了什麼問題：D –

在任何控件上調用驗證函數時都是反應形式。那隻能訪問那個控件。所以問題是你在confirm_password上調用函數。所以你只有它的價值，但沒有密碼。這就是爲什麼不能工作。 –

但是我們不能通過root訪問其他控件嗎？因爲root返回我們的表單組。 –

Angular 4自定義表單驗證不觸發

回答

相關問題