Angular2 - フォームが無効です

Question

私はanuglar2の反応を起こしています。私のフォームを提出しようとすると、そのフォームは無効と表示されます。問題の原因は何かを知っていますが、問題を解決する方法はわかりません。私のフォームコントロールの1つでは、カスタムバリデーターを作成して番号があるかどうかを調べました。だから、その必要とそれは数字でなければなりません。フォーム上で自分のカスタム検証を削除した場合、有効であることに戻ります。これを修正してカスタム検証を続けることができますか？

contact.component.ts

import { Component } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms' 
import { ValidationService } from './validation.service' 
@Component({ 
    selector:'contact', 
    providers:[ValidationService], 
    templateUrl:'./contact.component.html' 
}) 
export class ContactComponent { 
    public TicketForm = null ; 
    projects:Array<string> = ['Project One','Project Two','Project Three']; 
    constructor(public fb: FormBuilder) { 
     this.TicketForm = fb.group({ 
      name: [null, Validators.required], 
      email: [null, Validators.required], 
      phone: [null, Validators.required], 
      ticketID: [null, Validators.compose([Validators.required, ValidationService.numberValidation])], 
     }); 
    } 
    submit(form:any, isValid:boolean) { 
     console.log(form, isValid); 
    } 
} 

Validation.service.ts

import { Injectable } from '@angular/core'; 
import { AbstractControl } from "@angular/forms"; 

interface ValidationResult { 
    [key:string]:boolean; 
} 
@Injectable() 
export class ValidationService { 
    constructor() {} 
    public static numberValidation(control:AbstractControl): ValidationResult { 
     return ({'valid':!isNaN(control.value)}); 
    } 
} 

Answer 1

カスタムフォーム検証の一環で、このlinkをチェックしてください。私の答えに基づいて。

jonrsharpeが述べたように、nullはフォームが有効であることを意味します。そこで我々は、そうでない場合、我々は、私はあなたの例に合わせてカスタマイズ、提供されたリンクから{ “numberValidation”: true }

抜粋を返し、フォームが有効である場合はnullを返します。

あなたが気づくかもしれません一つ奇妙なことは、帰国がnull実際に検証が有効であることを意味していることです。我々は、検証エラー{ “numberValidation”: true }

を返す文字を見つけた場合はだからあなたの検証では、このようなものに変更します。

@Injectable() 
export class ValidationService { 
    constructor() {} 
    public static numberValidation(control: AbstractControl): ValidationResult { 
     if (isNaN(control.value)) { 
      return { "numberValidation": true } 
     } 
     return null; 
    } 
} 

、それが動作するはずです！ :)