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

Posted 2023-03-13

【中文标题】反应式表单模式验证和表单数组验证？

【英文标题】：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-' ]+$

它不工作

请举例

【参考方案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-' !@#$%^&]*$/