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