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

使用自定义表单验证部分检查此link。根据我的答案。

正如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;
    }
}

它应该工作！：）

Angular2 - 表格无效

1 个答案: