[英]Angular2 - Form invalid
I'm making a reactive from in anuglar2. 我在anuglar2做出反应。 When trying to submit my form, the form says its invalid. 在尝试提交表单时,表单显示无效。 I know what is causing the issue, but not how to fix it. 我知道造成这个问题的原因,但不知道如何修复它。 For one of my form controls I created a custom validator that checks if its a number. 对于我的一个表单控件,我创建了一个自定义验证器,用于检查它是否为数字。 So its required and it has to be a number. 所以它是必需的,它必须是一个数字。 If I remove my custom validation on the form, it goes back to being valid. 如果我删除表单上的自定义验证,它将恢复有效。 How do I fix this so i can keep my custom validation ? 我如何解决这个问题,以便我可以保留自定义验证?
contact.component.ts 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 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)});
}
}
Check this link with the Custom Form Validation part. 使用自定义表单验证部分检查此链接 。 Based my answer on that. 根据我的答案。
as jonrsharpe mentioned, null, means that form is valid. 正如jonrsharpe所提到的,null,意味着表单是有效的。 Therefore we return null if form is valid, otherwise we return { “numberValidation”: true }
因此,如果表单有效,则返回null,否则返回{ “numberValidation”: true }
excerpt from link I provided, customized to your example: 摘自我提供的链接,根据您的示例进行自定义:
One weird thing you might notice is that returning null actually means the validation is valid. 您可能会注意到的一个奇怪的事情是返回null实际上意味着验证是有效的。 If we find a letter we return the validation error
{ “numberValidation”: true }
如果我们找到一封信,则返回验证错误{ “numberValidation”: true }
So change your validation to something like this: 所以将验证更改为以下内容:
@Injectable()
export class ValidationService {
constructor() {}
public static numberValidation(control: AbstractControl): ValidationResult {
if (isNaN(control.value)) {
return { "numberValidation": true }
}
return null;
}
}
and it should work! 它应该工作! :) :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.