Проверка шаблона реактивной формы и проверка массива формы?

Для проверки реактивной формы я наблюдал много руководств и ссылок на плунжеры, но я не получаю ни одного сайта, который решает мою проблему.

проблема 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)**

в приведенных выше сценариях случай 1, 2 в порядке, если вы наблюдаете ввод case3, даже если он не удовлетворяет правилу регулярного выражения, он не выдает никаких сообщений. Я не уверен, что мое регулярное выражение правильное, мое требование (min-3, max-10, allow no, characters, -,', space special charactes)

Я пробую так много типов, но везде у меня возникает одна и та же проблема.

проблема 2: Как применить собственный валидатор для массивов форм

Пожалуйста, дайте мне лучший подход, который подойдет для всех общих случаев использования.

заранее спасибо

Сумья


angular angular2-forms angular5 angular4-forms
person Runali    schedule 29.01.2018    source источник
comment
проблема с регулярным выражением .. проверьте свое регулярное выражение на regex101.com   -  person radio_head    schedule 29.01.2018
comment
можешь сказать мне райт регикс   -  person Runali    schedule 29.01.2018
comment
Регулярное выражение, которое вы ищете, может быть ^[A-Za-z0-9-' ]+$   -  person radio_head    schedule 29.01.2018
comment
это не работает   -  person Runali    schedule 29.01.2018
comment
примеры пожалуйста   -  person radio_head    schedule 29.01.2018

Ответы (2)


arrow_upward
1
arrow_downward

Что касается проверки массива, если вы хотите проверить размер массива, вы можете создать пользовательскую проверку следующим образом:

  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>
person Max Amorim    schedule 21.02.2019

arrow_upward
0
arrow_downward

Для случая три шаблон /^[a-zA-Z0-9-']*$/ .

Для вашего требования (минимум-3, максимум-10, не разрешать символы, -,', специальные символы пробела) = используйте этот шаблон, если вам не нужны @ или $, просто удалите это /^[a-zA-Z0-9-' !@#$%^&]*$/

person Rakesh A R    schedule 20.02.2018