FromGroup的自定义验证程序错误

我使用自定义验证器与第二个FormGroup时的问题 .

我验证了我熟悉的FormBuilder，我使用自定义验证器来验证我的确认密码，但是当我访问密码值时，我遇到了FormGroup的问题 .

组件代码： ``
`import {Component, OnInit} from '@angular/core';
import {FormBuilder, Validators, FormGroup} from '@angular/forms';
import 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

代码html： ``
`<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': };
};
}`
`` image

问题：

core.es5.js：1020 ERROR错误：未捕获（在承诺中）：TypeError：无法读取未定义的属性'password'TypeError：无法在FormControl.eval [作为验证器]读取未定义的属性'password'（强密码 . validator.ts：6）在FormControl.AbstractControl._runValidator（forms.es5.js：2720）的FormControl.AbstractControl.updateValueAndValidity（forms.es5.js：2688）FormBuilder中的新FormControl（forms.es5.js：3011）位于FormBuilder.-reduceConachs（forms.es5）的Array.forEach（）的eval（forms.es5.js：5887）的FormBuilder._createControl（forms.es5.js：5905）中的.control（forms.es5.js：5863） . js：5886）FormButrol上的FormBuilder.group（forms.es5.js：5845）[作为验证者]（strong-password.validator.ts：6）在FormControl.AbstractControl._runValidator（forms.es5.js：2720） ）在FormBuilder.AcreateControl（forms.es5）的FormBuilder.control（forms.es5.js：5863）的FormControl.AbstractControl.updateValueAndValidity（forms.es5.js：2688）中的新FormControl（forms.es5.js：3011） . js：5905）at eval（表格 . es5.js：5887）位于FormBuilder上的FormBuilder._reduceControls（forms.es5.js：5886）中的Array.forEach（），在resolvePromise上的resolvePromise（zone.js：824）处的FormBuilder.roup（forms.es5.js：5845） zone.js：795）atval（zone.js：873）at ZoneDelegate.invokeTask（zone.js：425）at Zone.leInvokeTask（core.es5.js：3881）at ZoneDelegate.invokeTask（zone.js：424）在zone.runTask（zone.js：192），在drainMicroTaskQueue（zone.js：602），在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（匿名）@ 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 （匿名）@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（匿名）@main.bundle.js：1

image

环境：Angular版本：4.4.6，Angular CLI：1.5，节点版本：v8.7.0 .