Angular2 - 表格無效

Question

我在anuglar2做出反應。 在嘗試提交表單時，表單顯示無效。 我知道造成這個問題的原因，但不知道如何修復它。 對於我的一個表單控件，我創建了一個自定義驗證器，用於檢查它是否為數字。 所以它是必需的，它必須是一個數字。 如果我刪除表單上的自定義驗證，它將恢復有效。 我如何解決這個問題，以便我可以保留自定義驗證？

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

使用自定義表單驗證部分檢查此鏈接 。 根據我的答案。

正如jonrsharpe所提到的，null，意味着表單是有效的。 因此，如果表單有效，則返回null，否則返回{ “numberValidation”: true }

摘自我提供的鏈接，根據您的示例進行自定義：

您可能會注意到的一個奇怪的事情是返回null實際上意味着驗證是有效的。 如果我們找到一封信，則返回驗證錯誤{ “numberValidation”: true }

所以將驗證更改為以下內容：

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

它應該工作！ :)