Angular2 - Formular ungültig

Question

Ich mache eine reaktive aus inuglar2. Beim Versuch, mein Formular einzureichen, wird das Formular als ungültig gekennzeichnet. Ich weiß, was das Problem verursacht, aber nicht, wie ich es beheben kann. Für eine meiner Formularsteuerelemente habe ich einen benutzerdefinierten Validator erstellt, der prüft, ob es eine Nummer ist. So ist es erforderlich und es muss eine Nummer sein. Wenn ich meine benutzerdefinierte Überprüfung im Formular lösche, wird sie wieder gültig. Wie behebe ich das Problem, damit ich meine benutzerdefinierte Validierung beibehalten kann?

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

prüfen diese link mit dem benutzerdefinierten Formular Teil Validierung. Basiert meine Antwort darauf.

als jonrsharpe erwähnt, null, bedeutet, dass Form gültig ist. Deshalb kehren wir null, wenn Formular gültig ist, andernfalls wir { “numberValidation”: true }

Auszug aus Link zurückzukehren I vorgesehen ist, angepasst an Ihr Beispiel:

Eine seltsame Sache, werden Sie bemerken, dass die Rückgabe null bedeutet eigentlich die Validierung gültig ist . Wenn wir einen Brief finden wir wieder den Validierungsfehler { “numberValidation”: true }

So Ihre Validierung so zu etwas ändern:

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

und sollte es funktionieren! :)