FromGroupのカスタムバリデーターエラー

Question

2番目のFormGroupでカスタムバリデーターを使用したときの問題。

私はFormBuilderに精通していますが、確認用パスワードを確認するためにカスタムバリデーターを使用しましたが、パスワード値にアクセスするとFormGroupに問題があります。

コンポーネントのコード：HTMLの

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


@Component({ 
    selector: 'connexion-app', 
    templateUrl: './connexion.component.html' 
}) 
export class ConnexionComponentComponent implements OnInit { 
    form: FormGroup; 


    constructor(protected fb: FormBuilder) { 
    this.form = this.fb.group({ 
     name: this.fb.group({ 
     firstname: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(25)])], 
     lastname: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(25)])] 
     }), 
     email: ['', Validators.pattern('^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$')], 
     verification: this.fb.group({ 
     password: ['', Validators.compose([Validators.required, Validators.minLength(8)])], 
     passwordConfirm: ['', confirmPasswordValidator()] 
     }) 
    }); 
    } 


    ngOnInit(): void { 
    } 


    save(x: any) { 
    console.log(x); 
    } 

} 

image

コード：カスタムバリデータの

<form [formGroup]="form" novalidate (ngSubmit)="save(form.value)"> 
    <div formGroupName="name"> 
    <input formControlName="firstname" placeholder="firstname"> 
    <input formControlName="lastname" placeholder="lastname"> 
    </div> 
    <input formControlName="email" placeholder="Email"> 

    <div formGroupName="verification"> 
    <input formControlName="password" name="password" placeholder="password"> 
    <input formControlName="passwordConfirm" name="passwordConfirm" placeholder="passwordConfirm"> 
    </div> 
    <button>Submit</button> 
</form> 
<p>Value: {{ form.value | json }}</p> 
<p>Validation status: {{ form.status }}</p> 

image

コード：

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

export function confirmPasswordValidator(): ValidatorFn { 
    return (control: AbstractControl) => { 
    const pswd = control.value; 
    const passwordConfirm = control.root.value.verification.password; 
    return (pswd === passwordConfirm) ? null : {'strongPasswordError': {pswd}}; 
    }; 
} 

image

問題：

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'password' of undefined TypeError: Cannot read property 'password' of undefined at FormControl.eval [as validator] (strong-password.validator.ts:6) at FormControl.AbstractControl._runValidator (forms.es5.js:2720) at FormControl.AbstractControl.updateValueAndValidity (forms.es5.js:2688) at new FormControl (forms.es5.js:3011) at FormBuilder.control (forms.es5.js:5863) at FormBuilder._createControl (forms.es5.js:5905) at eval (forms.es5.js:5887) at Array.forEach() at FormBuilder._reduceControls (forms.es5.js:5886) at FormBuilder.group (forms.es5.js:5845) at FormControl.eval [as validator] (strong-password.validator.ts:6) at FormControl.AbstractControl._runValidator (forms.es5.js:2720) at FormControl.AbstractControl.updateValueAndValidity (forms.es5.js:2688) at new FormControl (forms.es5.js:3011) at FormBuilder.control (forms.es5.js:5863) at FormBuilder._createControl (forms.es5.js:5905) at eval (forms.es5.js:5887) at Array.forEach() at FormBuilder._reduceControls (forms.es5.js:5886) at FormBuilder.group (forms.es5.js:5845) at resolvePromise (zone.js:824) at resolvePromise (zone.js:795) at eval (zone.js:873) at ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602) at defaultErrorLogger @ core.es5.js:1020 ErrorHandler.handleError @ core.es5.js:1080 next @ core.es5.js:4503 schedulerFn @ core.es5.js:3635 SafeSubscriber.tryOrUnsub @ Subscriber.js:239 SafeSubscriber.next @ Subscriber.js:186 Subscriber._next @ Subscriber.js:127 Subscriber.next @ Subscriber.js:91 Subject.next @ Subject.js:56 EventEmitter.emit @ core.es5.js:3621 (anonymous) @ core.es5.js:3912 ZoneDelegate.invoke @ zone.js:392 Zone.run @ zone.js:142 NgZone.runOutsideAngular @ core.es5.js:3844 onHandleError @ core.es5.js:3912 ZoneDelegate.handleError @ zone.js:396 Zone.runGuarded @ zone.js:158 _loop_1 @ zone.js:702 api.microtaskDrainDone @ zone.js:711 drainMicroTaskQueue @ zone.js:610 Promise resolved (async) scheduleMicroTask @ zone.js:585 ZoneDelegate.scheduleTask @ zone.js:414 Zone.scheduleTask @ zone.js:236 Zone.scheduleMicroTask @ zone.js:256 scheduleResolveOrReject @ zone.js:871 ZoneAwarePromise.then @ zone.js:981 PlatformRef_.bootstrapModuleWithZone @ core.es5.js:4537 PlatformRef.bootstrapModule @ core.es5.js:4522 (anonymous) @ main.ts:11 ../../../../../src/main.ts @ main.bundle.js:207 __webpack_require @ inline.bundle.js:55 0 @ main.bundle.js:222 webpack_require @ inline.bundle.js:55 webpackJsonpCallback @ inline.bundle.js:26 (anonymous) @ main.bundle.js:1

image

環境： 角度バージョン：4.4.6、 角度CLI：1.5、 ノードのバージョン：v8.7.0。

私たちは、このように同じコンポーネントの変化やバリデータが必要です：

バリ：

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

export function confirmPasswordValidator(): ValidatorFn { 
    return (control: AbstractControl) => { 
    return (control.get('password').value === control.get('passwordConfirm').value) ? null : {'strongPasswordError': true}; 
    }; 
} 

コンポーネント：

Answer 1

最後に、私は、問題解決SOで

import {Component, OnInit} from '@angular/core'; 
import {FormBuilder, Validators, FormGroup, FormControl, AbstractControl} from '@angular/forms'; 
import {confirmPasswordValidator} from './strong-password.validator'; 


@Component({ 
    selector: 'connexion-app', 
    templateUrl: './connexion.component.html' 
}) 
export class ConnexionComponentComponent implements OnInit { 
    form: FormGroup; 


    constructor(protected fb: FormBuilder) { 
    this.form = this.fb.group({ 
     name: this.fb.group({ 
     firstname: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(25)])], 
     lastname: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(25)])] 
     }), 
     email: ['', Validators.pattern('^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$')], 
     verification: this.fb.group({ 
     password: ['', Validators.compose([Validators.required, Validators.minLength(8)])], 
     passwordConfirm: ['', Validators.compose([Validators.required, Validators.minLength(8)])] 
     }, {validator: confirmPasswordValidator()}), 
    }); 
    } 

    ngOnInit(): void { 
    } 


    save(x: any) { 
    console.log(x); 
    } 

}