Angular FromGroup的自定义验证程序错误

当我将自定义验证器与第二个FormGroup一起使用时出现的问题

我验证了我对FormBuilder的熟悉程度，我使用自定义验证器验证了我的确认密码，但当我访问密码值时，我发现FormGroup有问题

组件代码：

html代码：

问题是：

core.es5.js:1020错误：承诺中未捕获：类型错误：无法 读取未定义类型的属性“密码”错误：无法读取属性 未定义的“密码” 在FormControl.eval[as validator]中输入强密码.validator.ts:6 在FormControl.AbstractControl.\u runValidator forms.es5.js:2720 在FormControl.AbstractControl.updateValueAndValidity forms.es5.js:2688 在newformcontrolforms.es5.js:3011 在FormBuilder.control forms.es5.js:5863 在FormBuilder._CreateControlForms.es5.js:5905 在eval forms.es5.js:5887 at Array.forEach 在FormBuilder.\u reduceControl forms.es5.js:5886 在FormBuilder.groupforms.es5.js:5845 在FormControl.eval[as validator]中输入强密码.validator.ts:6 在FormControl.AbstractControl.\u runValidator forms.es5.js:2720 在FormControl.AbstractControl.updateValueAndValidity forms.es5.js:2688 在newformcontrolforms.es5.js:3011 在FormBuilder.control forms.es5.js:5863 在FormBuilder._CreateControlForms.es5.js:5905 在eval forms.es5.js:5887 at Array.forEach 在FormBuilder.\u reduceControl forms.es5.js:5886 在FormBuilder.groupforms.es5.js:5845 在resolvePromise zone.js:824 在resolvePromise zone.js:795 在评估区。js:873 在ZoneDelegate.invokeTask zone.js:425 在Object.onInvokeTask core.es5.js:3881 在ZoneDelegate.invokeTask zone.js:424 在Zone.runTask Zone.js:192 在drainMicroTaskQueue区域。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 订户._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.runguared@zone.js:158 _loop_1@zone.js:702 api.MicroTaskDrainOne@zone.js:711 drainMicroTaskQueue@zone.js:610承诺解析异步 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_u2;.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

环境： 角度版本：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};
  };
}

组成部分：

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);
  }

}

---

在这样的情况下，我们不希望看到您代码的图像，我们希望代码为文本，尝试使用控件。获取“密码”。值？请参阅。**我尝试了您的解决方案，但问题已更改为：**core.es5.js:1020错误错误：承诺中未捕获：TypeError:无法读取null TypeError的属性“值”：无法读取FormControl.eval上null的属性“值”[作为验证程序]FormControl.AbstractControl.中的强密码.validator.ts:6。\u FormControl.AbstractControl.UpdateValueandValidation forms中的runValidator forms.es5.js:2720。新FormControl forms中的es5.js:2688。FormBuilder.control forms.es5.js:3011。FormBuilder中的es5.js:5863。\u createControl forms.es5.js:5905

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}};
  };
}

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};
  };
}

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);
  }

}