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

#angular #angular-directive

#angular #angular-директива

Вопрос:

У меня есть следующая директива атрибута для выполнения проверки формы. Мой @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. Могу ли я увидеть ваш код в пользовательском валидаторе для appCarrierFormValidation ?

2. Я в замешательстве, appCarrierFormValidation правильно ли использовать только селектор атрибутов в шаблоне?

3. Извините, я пропустил несколько слов, прежде чем редактировать его. В любом случае, я только что неправильно понял ваш вопрос. Подождите, чего именно вы пытаетесь достичь? Где и когда вы хотели бы, чтобы эти 2 FormControls были проверены? Т.е. Вы бы хотели, чтобы поля формы проверялись немедленно, когда пользователь вводит значение? Или при отправке формы?

4. У меня есть компонент, AddCarriersComponent шаблон которого содержит форму, form [formGroup]="addCarrierForm" эта форма содержит те 2 элемента управления, которые требуют проверки.

5. почему вы используете директиву, которая не является компонентом??????

Ответ №1:

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

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

1. Какое регулярное выражение шаблона вы используете? И в этом методе мне не нужно было бы добавлять атрибут в шаблон?

2. Это пример, который вы можете изменить на свою логику

3. Я получаю formGroup expects a FormGroup instance сообщение об ошибке в моем шаблоне