角2表單元素作爲組件 - 驗證不工作

我實現了這個解決方案到我的項目http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/ 基本上你用form元素構建一個組件並將它放到窗體中，我遇到的問題是當我想構建一個驗證程序檢查驅動形成其作品經常模板，但在此實現它does not領域角2表單元素作爲組件 - 驗證不工作

import {Directive, Attribute} from '@angular/core'; 

    import { 
     NG_VALIDATORS, 
     AbstractControl, 
    } from '@angular/forms'; 

    @Directive({ 
     selector: '[validateEqual][ngModel]', 
     providers: [ 
     {provide: NG_VALIDATORS, useExisting: ParentFieldNotNullValidator, multi: true} 
     ] 
    }) 
    export class ParentFieldNotNullValidator { 
     constructor(@Attribute('validateEqual') public validateEqual: string) { 
     } 

     validate(c: AbstractControl): {[key: string]: any} { 
     if (!c.value) { 
      return null; 
     } 
     let e = c.root.get(this.validateEqual); 

     if (e && e.value) { 
      console.log('ERROR 1'); 
      return null; 
     } 
     console.log('error 2'); 
     return {validateError: "message"} }}

之間的相關性，我得到這樣的流 screenshot from webbrowser

此驗證應該只寫「ERROR 1」時，父字段存在並非爲空

我做錯了什麼？我的html：

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)"> 
    <div class="u-space-bottom-8"> 
    <form-input 
     cannotContainSpace 
     minlength="4" 
     required 
     name="username" 
     [(ngModel)]="user.username"> 
     > 
    </form-input> 
    </div> 
    <div class="u-space-bottom-8"> 
    <form-input 
     validateEqual="username" 
     type="password" 
     required 
     name="password" 
     [(ngModel)]="user.password"> 
     > 
    </form-input> 
    </div> 
    <button 
    class="c-btn c-btn--default u-h-10 u-bg-gray-16 u-paint-white-1" 
    type="send" 
    [disabled]="!form.valid" 
    > 
    {{'btn_login'|translate}} 
    </button> 
</form>

來源

2017-04-11 Paweł Lubczyński

究竟什麼，「不起作用」是什麼意思？ – cartant

我編輯我的問題 –

它很奇怪的行爲當我改變了這一部分： '如果（E && e.value）'本'如果（e.value）' 我得到一個錯誤**類型錯誤：無法讀取屬性'值'null ** 所以我的觀點是有時候父項域存在，有時候不是：/但爲什麼？ –

我找到了解決辦法，問題是使用數據綁定，現在我的驗證程序是這樣的：

import {Directive, Input} from '@angular/core'; 

import { 
    NG_VALIDATORS, 
    AbstractControl, 
} from '@angular/forms'; 

@Directive({ 
    selector: '[validateEqual][ngModel]', 
    providers: [ 
    {provide: NG_VALIDATORS, useExisting: ParentFieldNotNullValidator, multi: true} 
    ] 
}) 
export class ParentFieldNotNullValidator { 
    constructor() { 
    } 
    @Input('validateEqual') parentValue: string; 
    validate(c: AbstractControl): {[key: string]: any} { 
    if (!c.value) { 
     return null; 
    } 
    if (this.parentValue) { 
     return null; 
    } 
    return {parentFieldNotNull: "message"} 
    } 
}

和HTML看起來像這樣

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)"> 
    <div class="u-space-bottom-8"> 
    <form-input 
     cannotContainSpace 
     minlength="4" 
     required 
     name="username" 
     [(ngModel)]="user.username"> 
     > 
    </form-input> 
    </div> 
    <div class="u-space-bottom-8"> 
    <form-input 
     [validateEqual]="user.username" 
     type="password" 
     required 
     name="password" 
     [(ngModel)]="user.password"> 
     > 
    </form-input> 
    </div> 
    <button 
    class="c-btn c-btn--default u-h-10 u-bg-gray-16 u-paint-white-1" 
    type="wyslij" 
    [disabled]="!form.valid" 
    > 
    {{'btn_login'|translate}} 
    </button> 
</form>

來源

2017-04-11 13:00:34

角2表單元素作爲組件 - 驗證不工作

回答

相關問題