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

Question

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

Answer 1

您可以将 3-12 放入一个表单组中，然后针对该表单组编写一个自定义验证程序。

这是我编写的自定义验证器示例，用于比较表单组中的 "email" 和 "confirm email" 元素：

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 放入表单组，然后编写分配给该组的自定义验证器。

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

Reactive forms validating at least one field

angular

angular-reactive-forms