구성 요소로 각도 2 양식 요소 - 유효성 검사가 작동하지 않습니다

이 솔루션을 내 프로젝트에 구현했습니다 http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/ 기본적으로 양식 요소를 사용하여 구성 요소를 작성하고 양식에 넣어두면 문제가 있습니다. 그 작품을 형성 구동 일반 템플릿하지만이 나던이 구현 필드구성 요소로 각도 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"} }}

사이의 의존성을 확인하고, 나는이 검사기는 'ERROR 1'때 부모 필드를 작성해야 screenshot from webbrowser

스트림의이 종류를 얻을 존재하다 그리고 널이 아니야

내가 뭘 잘못 했니? 내 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

어떤 모습 , "작동하지 않는다"는 의미입니까? 내가 오류가 발생 (e.value)'경우 '경우 (예 && e.value)'에이은'** 형식 오류 : 읽을 수 없습니다 내가이 부분을 변경하는 경우 – cartant

내가 내 질문에 –

매우 이상한 행동 편집 속성 'value'of null ** 그래서 내 conclustion 때로는 부모 필드가 존재하지 않는 경우가 있습니다 :/왜? –

내가 문제가 데이터 바인딩과 함께 계셨으니이 해결책을 발견, 지금 내 유효성 검사기는 다음과 같습니다

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 양식 요소 - 유효성 검사가 작동하지 않습니다

답변

관련 문제