FromGroup 的自定义验证器错误

Question

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

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

组件代码：

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

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': {pswd}};
  };
}

image

问题：

core.es5.js:1020 ERROR 错误：未捕获（承诺中）：TypeError：不能 读取未定义类型错误的属性“密码”：无法读取属性 未定义的“密码” 在 FormControl.eval [作为验证器] (strong-password.validator.ts:6) 在 FormControl.AbstractControl._runValidator (forms.es5.js:2720) 在 FormControl.AbstractControl.updateValueAndValidity (forms.es5.js:2688) 在新的 FormControl (forms.es5.js:3011) 在 FormBuilder.control (forms.es5.js:5863) 在 FormBuilder._createControl (forms.es5.js:5905) 在 eval (forms.es5.js:5887) 在 Array.forEach () 在 FormBuilder._reduceControls (forms.es5.js:5886) 在 FormBuilder.group (forms.es5.js:5845) 在 FormControl.eval [作为验证器] (strong-password.validator.ts:6) 在 FormControl.AbstractControl._runValidator (forms.es5.js:2720) 在 FormControl.AbstractControl.updateValueAndValidity (forms.es5.js:2688) 在新的 FormControl (forms.es5.js:3011) 在 FormBuilder.control (forms.es5.js:5863) 在 FormBuilder._createControl (forms.es5.js:5905) 在 eval (forms.es5.js:5887) 在 Array.forEach () 在 FormBuilder._reduceControls (forms.es5.js:5886) 在 FormBuilder.group (forms.es5.js:5845) 在 resolvePromise (zone.js:824) 在 resolvePromise (zone.js:795) 在评估（zone.js:873） 在 ZoneDelegate.invokeTask (zone.js:425) 在 Object.onInvokeTask (core.es5.js:3881) 在 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 下一个@core.es5.js:4503 schedulerFn @ core.es5.js:3635 SafeSubscriber.tryOrUnsub @ 订阅者.js:239 SafeSubscriber.next @订阅者.js:186 订阅者._next @订阅者.js:127订阅者.下一个@ 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 承诺已解决（异步） 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

环境： 角度版本：4.4.6， 角 CLI：1.5， 节点版本：v8.7.0。

Answer 1

终于解决了这个问题：

我们需要像这样对组件和验证器进行相同的更改：

验证器：

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

}