反应式表单模式验证和表单数组验证？答案

【问题标题】：Reactive Form pattern Validation and form array validation?反应式表单模式验证和表单数组验证？
【发布时间】：2018-07-08 02:01:10
【问题描述】：

对于反应式表单验证，我观察了许多教程和 plunker 链接但我没有任何网站可以解决我的问题

问题 1：formgroup 模式是 [aA-zZ0-9'-]$/)](不允许,字符,-,',空格特殊字符)

export class AppComponent implements OnInit {

  private myForm: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
        this.myForm = this.fb.group({
          'name': ['', [Validators.required,
                    Validators.minLength(3),
                    Validators.maxLength(10),
                    Validators.pattern(/[aA-zZ0-9'-]$/)]],

          'phoneNumbers': new FormArray([new FormControl('')])
        });
      }
}

对于以上内容，请查看此 plunker 链接

https://plnkr.co/edit/km7nGR8DjyE4l6tH5JEC?p=preview

在这里，如果您观察到 name 字段，它在某些情况下会按照正则表达式条件工作

**case1-> aa -- not valid(minimum 3 characters),
case2-> aaa@ --not valid(special chararacter)
case3-> aaa@b -- valid(not giving any message)**

如果您观察到 case3 输入，即使它不满足正则表达式规则，它也不会抛出任何消息我不确定我的正则表达式是否正确，我的要求是(min-3, max-10, allow no, characters, -,', space special charactes)

我尝试了很多类型，但每个地方我都遇到同样的问题

问题2：如何为表单数组应用自定义验证器

请给我适合所有一般用例的最佳方法

提前致谢

苏米亚

【问题讨论】：

正则表达式问题..在 regex101.com 中检查您的正则表达式
你能告诉我 wright regix
您正在寻找的正则表达式可能是^[A-Za-z0-9-' ]+$
它不工作
请举例

标签： angular angular2-forms angular5 angular4-forms

【解决方案1】：

关于数组验证，如果你想验证数组的大小，你可以像这样构建一个自定义验证：

  arrayLengthValidator(minimumLength: number): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    if (control.value.length < minimumLength) {
      return {'arrayLength': 'array length is invalid'};
    }
    return null;
  }; 
}

然后像这样添加到您的表单中：

this.myForm = this.fb.group({
      'name': ['', [Validators.required,
                Validators.minLength(3),
                Validators.maxLength(10),
                Validators.pattern(/[aA-zZ0-9'-]$/)]],

      'phoneNumbers': this.formBuilder.array([], this.arrayLengthValidator(1))
    });

现在如果你想检查数组元素的空值，你可以使用验证作为指令并将选择器添加到你的输入中：

import { Directive } from '@angular/core';
import { Validator, NG_VALIDATORS, AbstractControl } from '@angular/forms';

@Directive({
  selector: '[appEmptyValue]',
  providers: [{provide: NG_VALIDATORS, useExisting: EmptyValueDirective, multi: true}]
})
export class EmptyValueDirective implements Validator {

      validate(control: AbstractControl): {[key: string]: any} | null {
           return control.value === '' ?  {'emptyValue': 'input value cannot be empty'} : null;
      }

}

关于输入：

<input type="text" appEmptyValue>

【讨论】：

【解决方案2】：

对于情况三，模式是/^[a-zA-Z0-9-']*$/。

根据您的要求（最小 3、最大 10、不允许、字符、-、'、空格特殊字符）= 如果您不需要 @ 或 $，请使用此模式，只需删除 /^[a-zA-Z0-9-' !@#$%^&]*$/

【讨论】：