为动态表单创建自定义验证器 angular 2

Question

我只是介绍了如何创建动态表单的红色 angular 2 食谱，但我想知道如何将自定义验证器添加到特定字段。

questions.forEach(question => {
  group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
                                          : new FormControl(question.value || '');
});

在这里，他们组成了一个来自组来保存表单输入，那么如果我想对特定问题应用特定验证呢？ 例如：如果我输入了确认密码匹配的内容。 我知道有validateequal 属性来完成这项任务我如何应用这个validateequal 甚至创建我自己的自定义验证

注意它是动态表单，这意味着可以保存任何输入，例如我打算使用相同的表单来生成登录表单，这意味着它只有密码输入，我需要离开检查是否有输入将保留密码，如果有的话将保留密码确认，如果是，那么我需要在提交之前检查它们是否匹配

Answer 1

好的，我想我有。

您将使用自定义指令来完成工作。

这是一个关于自定义指令https://angular.io/docs/ts/latest/guide/attribute-directives.html的非常初级的教程

如果您创建该应用程序的模板，但您可以轻松地对其进行修改以适应您的参数。

在我的例子中，我以下列方式使用了该示例。

你的 NgModule || app.module.ts

import { customDirective } from '../directive/path';

您的 customDirective.ts || js

import {Directive, HostListener, Input, ElementRef} from '@angular/core';
@Directive({
   selector: '[fooSelector]'
})

export class CustomDirective {
  constructor(private el: ElementRef, private renderer: Renderer) {}
  @Input('fooSelector') testing: Object;

  //this controls event type with change being the event
  @HostListener('change') onChange(){
    this.logicFunct(this.htmlAttr); //will define htmlAttr in template
  }

  //this is the validator logic
  private logicFunct($obj: Object){
    // submit logic here - for ex:
    if($obj != 'test) {
      this.varBar = true; //check template ngIf
    }
  }
}

你的模板

<input
  type="text"
  #htmlAttr
  [fooSelector]="this.htmlAttr._value"
  *ngIf="!this.varBar">
</input>

我几乎肯定还有其他更好的方法可以做到这一点，如果有人有，请告诉我们！

希望这可以帮助任何偶然发现它的人。