Question

我只是红色的角度2食谱如何我可以创建动态表单，但我喜欢我如何添加自定义验证器到特定领域。

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

在这里，他们组成一个from组来保存表单输入，那么如果我想对特定问题应用特定验证呢？例如：如果我有确认密码匹配的输入。我知道有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>

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

希望这有助于任何人绊倒它。

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

1 个答案: