Как использовать директиву проверки формы Angular2 - PullRequest
Новая
       11

Как использовать директиву проверки формы Angular2

0 голосов
/ 09 апреля 2019

У меня есть следующая директива атрибута для проверки формы. Мой @NgModule включает его в массив объявлений. Моя форма находится в шаблоне компонента. Как бы я добавил атрибут appCarrierFormValidation в мою форму, чтобы иметь возможность использовать эту директиву и проверять вводимые данные? 

import { Directive } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Directive({
  selector: '[appCarrierFormValidation]'
})
export class CarrierFormValidationDirective {

  addCarrierForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
    this.addCarrierForm = this.fb.group({
      name: ['', Validators.required],
      email: ['',  [Validators.required, Validators.email]]
    })
  }
}

1 Ответ

1 голос
/ 09 апреля 2019

Вы можете реализовать так, как я использовал в своем проекте. 

  import { FormControl } from '@angular/forms';

    export function appCarrierFormValidation(control: FormControl) {

        // change your logic to validate carrier
        let pattern = /[*\\/|":?><]/gi;
        //if validation fails, return error name & value of true
        if (pattern.test(control.value)) {
            return { validString: true };
        }
        //otherwise, if the validation passes, we simply return null
        return null;
    }

И использовать 

name: ['', [Validators.required, appCarrierFormValidation]],

Если вы хотите использовать formGroup 

public appCarrierFormValidation() : ValidatorFn{
       return (group: FormGroup): ValidationErrors => {
          const name= group.controls['name'];
          const email= group.controls['email'];
          // add your logic here
          if (name.value.length < 6 && email.value.indexOf('@') < 0) {
             email.setErrors({invalid: true});
          } else {
             email.setErrors(null);
          }
          return;
    };
 }

Обновите ваш код 

 createForm() {
    this.addCarrierForm = this.fb.group({
      name: ['', Validators.required],
      email: ['',  [Validators.required, Validators.email]]
    })
    this.addCarrierForm .setValidators(this.appCarrierFormValidation())
  }
...