1

我有多个验证器分配给 formControl，其中 formControlName 为 firstName。如何知道哪个验证给出错误，以便我可以给出适当的消息

以下是我定制的所需验证功能

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
4

4 回答 4

1

如果您使用的是输入标签中提到的模板驱动表单方法。

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

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

this.userForm = this.fb.group({
      name:[[],[<any>Validators.required]],
   })
于 2017-08-03T05:56:39.700 回答
0

您errors可能为 null，因此您应该使用 elvis 或安全导航运算符：?.像这样：

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

你在评论中提到：

我不想使用 libraby 验证器，我想使用自定义验证器， required 只是一个例子

如果您不打算使用Jverma 的回答中提到的Reactive Forms方法，则需要按照本博客文章中的说明创建指令（粘贴在下面的相关代码）

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);
  }
}
于 2017-08-03T07:28:09.643 回答
0

您可以向验证器返回的错误对象添加其他信息：

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>
于 2017-08-03T07:33:43.747 回答
0 
<md-error *ngIf="firstName.hasError('required') && (firstName.touched || submitted)">
   Please enter the required field
</md-error>

这对我有用。

firstName.errors.required 不起作用

谢谢你的帮助。

如果有多个验证失败并且有多个消息，那么您可以通过添加 css 仅显示第一条错误消息

md-error:not(:first-of-type) { display: none; }
于 2017-08-03T10:26:41.257 回答