Angular 2 - 反应形式的密码验证

Question

我正在构建一个应该验证新密码和重复新密码的表单。但是，我在他们的测试中遇到了错误，我无法弄清楚如何解决它们。

首先，我有一个方法来启动所需的表单：

private initForm(): any {
  this.form = this.fb.group({
     oldPassword': ["", Validators.compose([Validators.required, Validators.minLength(6)])]
  })

  let newPassword = new FormControl(null, [
    Validators.required,
    Validators.minLength(6),
    this.validNewPassword(this.form)
  ])

  let repeatNewPassword = new FormControl(null, [
    Validators.required, 
    Validators.minLength(6),
    this.validPasswordConfirm(this.form)
  ]);

  this.form.addControl('newPassword', newPassword);
  this.form.addControl('repeatNewPassword', repeatNewPassword);
}

在这里我声明了应该处理其值的两种方法：

private validNewPassword(form: any): any {
  return ((control: FormControl) => {
    let newPassword = control.value;
    if (newPassword == form.value.oldPassword && newPassword !== form.value.repeatNewPassword) {
      return {
        newPassword: true
      }
    }
  return null;
  })   
}

private validPasswordConfirm(form: any): any {
  return ((control: FormControl) => {
    let repeatPassword = control.value;
    if (repeatPassword == form.value.oldPassword && repeatPassword !== form.value.newPassword) {
      return {
        repeatPassword: true
      }
    }
  return null;
  })   
}

新密码和重复新密码应与当前密码相同，但仍与当前密码不同才有效。但是当我运行它的测试时，我得到以下结果：

it('should test new password validation', () => {
    let errors = {};
    let oldPassword = comp.form.controls['oldPassword'];
    let newPassword = comp.form.controls['newPassword'];
    let repeatNewPassword = comp.form.controls['repeatNewPassword']; 
    errors = newPassword.errors || {};

    expect(newPassword.valid).toBeFalsy();

    expect(errors['required']).toBeTruthy(); 

    newPassword.setValue('12345');
    errors = newPassword.errors || {};    
    expect(errors['minlength']).toBeDefined();

    // old is equal new
    oldPassword.setValue('123456')
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123455');
    errors = repeatNewPassword.errors || {};    
    expect(errors['newPassword']).toBeTruthy(); // >> Expected undefined to be truthy

    // all equal
    oldPassword.setValue('123456');
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123456'); 
    errors = newPassword.errors || {};    
    expect(errors['newPassword']).toBeTruthy();

    // all different
    oldPassword.setValue('123123');
    newPassword.setValue('123455');
    repeatNewPassword.setValue('123456'); 
    errors = newPassword.errors || {};
    expect(errors['newPassword']).toBeTruthy(); // >> Expected undefined to be truthy

    // valid
    oldPassword.setValue('123456');
    newPassword.setValue('654321');
    repeatNewPassword.setValue('654321');   
    expect(newPassword.valid).toBeTruthy();
  }); 


it('should test repeat password validation', () => {
    let errors = {};
    let oldPassword = comp.form.controls['oldPassword'];
    let newPassword = comp.form.controls['newPassword'];
    let repeatNewPassword = comp.form.controls['repeatNewPassword']; 
    errors = repeatNewPassword.errors || {};

    expect(newPassword.valid).toBeFalsy();

    expect(errors['required']).toBeTruthy(); 

    repeatNewPassword.setValue('12345');
    errors = repeatNewPassword.errors || {};    
    expect(errors['minlength']).toBeDefined();

    // old is equal repeat
    oldPassword.setValue('123456')
    newPassword.setValue('123455');
    repeatNewPassword.setValue('123456');
    errors = repeatNewPassword.errors || {};    
    expect(errors['repeatPassword']).toBeTruthy();

    // all different
    oldPassword.setValue('123454')
    newPassword.setValue('123455');
    repeatNewPassword.setValue('123456');
    errors = repeatNewPassword.errors || {};    
    expect(errors['repeatPassword']).toBeTruthy(); // >> Expected undefined to be truthy

    // all equal
    oldPassword.setValue('123456');
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123456');
    errors = repeatNewPassword.errors || {};    
    expect(errors['repeatPassword']).toBeTruthy(); // >> Expected undefined to be truthy

    // valid
    oldPassword.setValue('123455');
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123456');    
    expect(repeatNewPassword.valid).toBeTruthy(); 
  });

如果有人可以帮助我，我将不胜感激。谢谢！

Answer 1

我就是这样解决的：

1) 按预期启动表单，但现在我验证整个表单

  private initForm(): any {
    this.form = new FormGroup({
      'oldPassword': new FormControl(null, [Validators.required, Validators.minLength(6)]),
      'newPassword': new FormControl(null, [Validators.required, Validators.minLength(6)]),
      'repeatNewPassword': new FormControl(null, [Validators.required, Validators.minLength(6)])
    }, this.validatePassword);
  }

  private validatePassword(fg: FormGroup) {
    return fg.get('newPassword').value === fg.get('repeatNewPassword').value && 
      fg.get('newPassword').value !== fg.get('oldPassword').value && 
      fg.get('repeatNewPassword').value !== fg.get('oldPassword').value 
      ? null : { 'invalidPassword': true };
  }

2) HTML 验证

<ion-input class="password-field" id="oldPassword" [type]="type" formControlName="oldPassword"
  [class.invalid]="!form.valid && (form.get(['oldPassword']).dirty || submitAttempt)">
</ion-input>

3) 测试验证

  it('should test new password validation', () => {
    let errors = {};
    let oldPassword = comp.form.controls['oldPassword'];
    let newPassword = comp.form.controls['newPassword'];
    let repeatNewPassword = comp.form.controls['repeatNewPassword']; 
    errors = comp.form.errors || {};

    expect(comp.form.valid).toBeFalsy();

    newPassword.setValue('12345');
    errors = newPassword.errors || {};    
    expect(errors['minlength']).toBeDefined();

    // old is equal new
    oldPassword.setValue('123456')
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123455');
    errors = comp.form.errors || {};    
    expect(errors['invalidPassword']).toBeTruthy();

    // all equal
    oldPassword.setValue('123456');
    newPassword.setValue('123456');
    repeatNewPassword.setValue('123456'); 
    errors = comp.form.errors || {};    
    expect(errors['invalidPassword']).toBeTruthy();

    // all different
    oldPassword.setValue('123123');
    newPassword.setValue('123455');
    repeatNewPassword.setValue('123456'); 
    errors = comp.form.errors || {};    
    expect(errors['invalidPassword']).toBeTruthy();

    // valid
    oldPassword.setValue('123456');
    newPassword.setValue('654321');
    repeatNewPassword.setValue('654321');   
    expect(newPassword.valid).toBeTruthy();
  });