验证器模型驱动(反应性)表单

Question

我有一个具有用户名、密码和确认密码字段的表单。我正在使用这个验证服务让这两个检查：

1. 密码不得包含用户名。
2. 密码和确认密码字段必须包含相同的“密码”。 导出类ValidationService {静态getValidatorErrorMessage(validatorName: string，validatorValue?：any) { let config ={‘必需’：‘必需’，'invalidPasswordUser'：‘无效密码’。密码不得包含用户名！、“密码错配”：“密码错配”、“最小长度”：Minimum length ${validatorValue.requiredLength}、“最大长度”：Maximun length ${validatorValue.requiredLength} }；返回configvalidatorName；}静态passwordMatchValidator(控制){ if (control.value) { if (control.value === control.parent.value.password) {返回null；}其他{返回{ 'passwordMismatch‘：true} } 静态usernameCheckValidator(控制){ if (control.value) { if control.value{返回null；} else{返回{ 'invalidPasswordUser'：true}；}} }}

以下是表格：

this.userForm = this.formBuilder.group({

      'username': ['',[ Validators.required,Validators.minLength(4),Validators.maxLength(20)]],
      'password': ['', [Validators.required,Validators.minLength(6),ValidationService.usernameCheckValidator,Validators.maxLength(20)]],
      'confirm': ['', [Validators.required,ValidationService.passwordMatchValidator,Validators.maxLength(20)]],
      'profile': ['', [Validators.required]],
    });

对于第一个检查，如果我写在用户名之前和密码之后，它将以正确的方式工作，如果密码不正确(因为包含用户名)消息将出现。相反，如果我第二次更改用户名(我编写密码)，密码消息将不会出现。同样的行为还有第二次检查。所以，在这个时候，我有一个“单向”验证器。问题出在哪里？

Answer 1

据我所知，当您更改控件本身时，将调用AbstractControl上的验证器函数，这意味着当您更改用户名时，它不会检查密码，它只会检查用户名。

解决方案是为用户名控件tot编写密码验证或为表单一般编写验证，并检查需要其他字段的验证。类似于：

 formValidation(formGroup){
        if(formGroup.value.password.toUpperCase().includes(formGroup.value.username.toUpperCase()) 
              return {someError:'error'}
    }