创建自定义验证器的动态形式角2

问题描述:

我只是红角2烹饪书你如何创建动态表单,但我徘徊我怎么可以添加自定义验证器到特定的领域。创建自定义验证器的动态形式角2

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

在这里,他们形成了从组,以保存表单输入等什么,如果我想在特定的验证适用于某个特定问题 例如:如果我有确认密码匹配的输入。 我知道有validateequal属性做这个任务我怎么能将此validateequal甚至创建自己的自定义验证

注意,它是动态的形式,这意味着可以容纳例如我计划使用任何输入同样的形式生成登录表单,这意味着它只有密码输入,我需要检查是否有输入将保存密码,如果有任何将保存密码确认,如果是的话,那么我需要检查它们是否匹配之前提交

+0

这应该可以帮助你脱离伴侣。 https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2 就自定义验证去,IM在同一船试图那个。我相信定制指令将会是一条路,但我可能是错的。 这人可能也会帮助你,有点过时,但你可以从中得到一个想法。 http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/ –

+0

我红色的所有这些文章,但我的问题是我动态建立窗体,我想验证确认密码输入,但实际上在这一刻密码控制尚未建立。 @Swank你知不知道我可以手动设置表单验证 – kero

+0

@kero你知道吗? – k11k2

好吧,我想我有。

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

这是自定义指令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> 

,我几乎可以肯定有其他更好的的方式来做到这一点,如果有人有一个,请告诉我们!

希望这可以帮助任何人绊倒它。

+0

谢谢你的贡献我真的很感激,但我的问题是完全不同的, – kero

+0

好吧,它是,它不是。虽然这有点不正统,但您可以将此方法用于您的自定义验证。 –

+0

我的实际问题是,如果此输入字段存在,我需要从另一个输入中获取值,请检查我的更新以上是否存在问题 – kero