如何使用 Angular2 表单验证指令

Question

我有以下属性指令来执行表单验证。我的@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]]
    })
  }
}

Answer 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 & 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]],

如果要使用表单组

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