Question

对于反应式表单验证，我观察了许多教程和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

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

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

在上面的sceanarios case1中，如果您观察 case3 输入，即使它不满足regix规则也不会丢弃任何消息我不确定我的regix是否正确，我的要求是(min-3, max-10, allow no, characters, -,', space special charactes)

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

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

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

提前致谢

Soumya

Answer 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>

Answer 2

对于案例三，模式为/^[a-zA-Z0-9-']*$/。

根据您的要求（min-3，max-10，允许否，字符， - ，'，空格特殊字符）=如果您不需要@或$，只需删除/^[a-zA-Z0-9-' !@#$%^&]*$/ <即可使用此模式/ p>

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

2 个答案: