javascript - Angular2 - 表单无效

Question

我在 anuglar2 中做了一个 react 。尝试提交我的表格时，表格显示无效。我知道是什么导致了这个问题，但不知道如何解决它。对于我的一个表单控件，我创建了一个自定义验证器来检查它是否是一个数字。所以它是必需的，它必须是一个数字。如果我删除了表单上的自定义验证，它将恢复有效。我该如何解决这个问题，以便我可以保留我的自定义验证？

接触.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);
    }
}

验证.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 表示表单有效。因此，如果表单有效，我们返回 null，否则我们返回 { “numberValidation”: true }

摘 self 提供的链接，根据您的示例定制:

One weird thing you might notice is that returning null actually means the validation is valid. If we find a letter we return the validation error { “numberValidation”: true }

所以把你的验证改成这样:

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

它应该可以工作! :)