响应式表单验证至少一个字段

Question

寻找一种在 Angular 中使用反应式表单来验证 2 个必填字段和其他 10 个字段中的至少一个的方法。因此，我们需要字段 1 和 2，并且必须选择 3 到 12 中的至少一个。实现这一目标的最佳方法是什么？

Answer 1

您可以将 3-12 放入一个表单组并针对该表单组编写一个自定义验证器。

这是我编写的自定义验证器示例，用于比较表单组中的“电子邮件”和“确认电子邮件”元素：

function emailMatcher(c: AbstractControl): {[key: string]: boolean} | null {
    let emailControl = c.get('email');
    let confirmControl = c.get('confirmEmail');

    if (emailControl.pristine || confirmControl.pristine) {
      return null;
    }

    if (emailControl.value === confirmControl.value) {
        return null;
    }
    return { 'match': true };
 }

然后将表单定义如下：

    this.customerForm = this.fb.group({
        firstName: ['', [Validators.required, Validators.minLength(3)]],
        lastName: ['', [Validators.required, Validators.maxLength(50)]],
        emailGroup: this.fb.group({
            email: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+')]],
            confirmEmail: ['', Validators.required],
        }, {validator: emailMatcher}),
        phone: ''
    });

您可以执行类似的操作，将元素 3 - 12 放入表单组，然后编写分配给该组的自定义验证器。