如何识别哪个自定义验证函数在反应形式中导致错误

Question

我有多个验证程序分配给formControl作为firstName的formControl。 如何知道哪些验证给错误，这样我可以给予适当的消息

以下是所需

export function required() { 
    return function(control:FormControl) 
    { 
    var value: string = control.value; 
    value = value.trim(); 
    if(value.length == 0) 
     return {required:true};  
    return null; 
    } 
} 

我定制的验证功能和使用是这样

<md-error [hidden]="!firstName.errors.required || (!firstName.touched && !submitted)"> 
    Name is required 
</md-error> 

我得到出现以下错误

ERROR TypeError: Cannot read property 'required' of null 

Answer 1

​​

这为我工作。

firstName.errors.required不工作

感谢所有帮助。

如果有多个验证失败和多条消息则U可以通过CSS

md-error:not(:first-of-type) { display: none; } 

Answer 2

如果您正在使用模板驱动表格您输入标签内需要的方法。

<input type="text" class="form-control" #nameRef="ngModel" ngModel required name="name" placeholder="Enter Name"> 

或者在反应形式方法的情况下

this.userForm = this.fb.group({ 
     name:[[],[<any>Validators.required]], 
    }) 

Answer 3

这可能是你的errors可以为空，所以你应该使用猫王或安全导航操作：?.这样的：

<md-error [hidden]="!firstName.errors?.required || (!firstName.touched && !submitted)"> 
    Name is required 
</md-error> 

您在评论中提到：

我不想使用libraby验证，我想使用自定义的验证，需要的是只是一个例子

如果你不打算使用Jverma's answer提到的Reactive Forms方法，你需要创建一个Directive如this blog post描述（有关代码粘贴下面）

import { AbstractControl, ValidatorFn } from '@angular/forms'; 

// validation function 
function validateJuriNameFactory() : ValidatorFn { 
    return (c: AbstractControl) => { 

    let isValid = c.value === 'Juri'; 

    if(isValid) { 
     return null; 
    } else { 
     return { 
      juriName: { 
       valid: false 
      } 
     }; 
    } 
} 

@Directive({ 
    selector: '[juriName][ngModel]' 
}) 
export class JuriNameValidator implements Validator { 
    validator: ValidatorFn; 

    constructor() { 
    this.validator = validateJuriNameFactory(); 
    } 

    validate(c: FormControl) { 
    return this.validator(c); 
    } 
} 

Answer 4

可以由验证器返回的错误对象添加额外的信息：

export function required(String info) { 
    return function(control:FormControl) 
    { 
    var value: string = control.value; 
    value = value.trim(); 
    if(value.length == 0) 
     return {required:true, info: info};  
    return null; 
    } 
} 

his.userForm = this.fb.group({ 
    name:[[],[<any>required('firstName')]], 
}) 

<md-error [hidden]="!firstName.errors.required || (!firstName.touched && !submitted)"> 
    <div *ngFor="let err of firstName.errors"> 
    {{error?.info}} 
    </div> 
</md-error>