Angular - 实际应用中的形式验证

Question

我的问题的目的是弄清楚它是否必须很复杂或者我可能做错了什么。

为了教程的目的，很容易展示表单验证的强大功能。但当涉及到现实生活中的应用时，事情就会变得复杂。我从一个简单的注册表开始

• 用户名
• 电子邮件
• 密码
• 密码重复

如果我使用类似于教程的方法，那么我会使用 *ngIf 来显示相应输入上方出现的所有类型的错误。问题是它会导致糟糕的用户体验:

• 错误的显示和隐藏导致输入跳跃
• 如果我有很多密码验证条件，那么用户会收到很长的错误列表
• 表单开始看起来像一个大警告，而且不简洁
• 尽管用户尚未输入任何内容，但重复的密码表明它与密码不同

此外，为了在未触及表单时停止显示错误，需要在模板中的各处添加这样的代码

myForm.get('controlName').invalid && (myForm.get('controlName').dirty || myForm.get('controlName').touched)

什么开始类似于 PHP 意大利面条代码。

我想说的是，即使对于非常简单的形式，如果想要创造良好的用户体验，逻辑也会开始变得非常复杂。到目前为止，我已经完成了组件中的逻辑，它扫描特定控件的错误并一次仅返回一个错误。

你的经历是什么？您有一些建议或最佳实践示例吗？

Answer 1

Angular 2+ 中提供了两种类型的表单。

1. 模板驱动的表单，与 Angularjs 1.x 非常相似
2. 响应式(Reactive)表单，为复杂逻辑提供编程表单处理，例如自定义验证和元素之间的验证。

为了在您的情况下验证密码和重复密码，在使用响应式(Reactive)表单时，您可以创建一个包装器FormGroup 将这两个表单元素分组。

this.email = new FormControl('', [Validators.required, this.validateEmail]);
    this.username = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(20)]);
    this.password = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(20)]);
    this.passwordConfirm = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(20)]);

    this.passwordGroup = fb.group(
      {
        password: this.password,
        passwordConfirm: this.passwordConfirm
      },
      { validator: this.passwordMatchValidator }
    );

    this.signupForm = fb.group({
      email: this.email,
      username: this.username,
      passwordGroup: this.passwordGroup
    });

并使用本地函数来验证密码组或使用自定义指令。

passwordMatchValidator(g: FormGroup) {
    return g.get('password').value === g.get('passwordConfirm').value
      ? null : { 'mismatch': true };
  }

如果验证失败，则在模板文件中添加一个指示符。

<div class="col-md-12" [class.has-danger]="passwordGroup.invalid">
              <div class="form-control-feedback" *ngIf="passwordGroup.invalid">
                <p *ngIf="passwordGroup.hasError('mismatch')">Passwords are mismatched.</p>
              </div>
            </div>

检查sample codes来 self 的 Github。并阅读 Handling forms 的页面和 processing auth了解详情。