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

Question

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

问题1：formgroup模式是qazxsw poi（允许否，字符， - ，'，空格特殊字符）

[aA-zZ0-9'-]$/)]

如上所述，请检查此plunker链接

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('')])
        });
      }
}

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

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

在上面的场景情况1,2，如果你观察case3输入，即使它不满足regix规则它没有抛出任何消息我也不错，我不确定我的regix是对的，我的要求是qazxsw poi

我正在尝试这么多类型，但每个地方我都遇到同样的问题

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

请给我最好的方法，以满足所有一般用例

提前致谢

温和

Answer 1

关于数组验证，如果要验证数组的大小，可以构建一个自定义验证，如下所示：

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

然后只需添加到您的表单：

(min-3, max-10, allow no, characters, -,', space special charactes)

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

  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))
    });

Answer 2

对于案例三，模式是

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;
      }

}

。

为了你的要求（min-3，max-10，允许no，字符， - ，'，空格特殊字符）=如果你不需要@或$只使用这个模式删除那个qazxsw poi