主页 / 问题 / 933919
Accepted
Max
Asked:2020-01-19 12:39:47 +0000 UTC2020-01-19 12:39:47 +0000 UTC

如何检查 FormGroup 中验证器的类型？

  • 772

Angular：7
有一个组件，我将实例FormGroup和字段名称传递给该组件。
如果该字段无效，则会显示错误。
您需要这样做，以便为每个验证显示不同的错误：
对于Validation.required：“必填字段”
对于Validation.email：“电子邮件无效”
等等
现在组件看起来像这样：
HTML

<div *ngIf="form.controls[fieldName].touched && form.controls[fieldName].invalid"
     class="alert alert-danger mb-1" role="alert">
    <div>
        Invalid field
    </div>
</div>

TS

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms";

@Component({
    selector: 'cts-field-error',
    templateUrl: './field-error.component.html',
    styleUrls: ['./field-error.component.sass']
})
export class FieldErrorComponent implements OnInit {
    @Input() form: FormGroup;
    @Input() fieldName: string;

    constructor() {}

    ngOnInit() {}
}
angular2

1 个回答

  1. Best Answer

    form.controls[fieldName]- 你不能那样做，因为它看起来像一辆自行车。

    无论如何，您都知道表单中的所有控件，因为您自己创建了它。

    我怎么样？为方便起见，为了不与表单本身共舞，我为控件创建了 getter：

    public form = new FormGroup({
  email: new FormControl(null, [Validators.email])
});

public get email(): AbstractControl {
  return this.form.get('email')!;
}

    在组件本身的输入参数中，app-cts-field-error我们不能再传递整个表单和字段名，只能传递控件本身：

    <app-cts-field-error *ngIf="email.errors" [control]="email"></app-cts-field-error>

    FormControl.prototype.errors只能有2个值——null和一个对象。如果null- 则控件有效且没有错误。

    在组件内部app-cts-field-error，您可以通过以下方法检查控件是否有错误hasError：

    <div *ngIf="control.hasError('required')">This field is required</div>
<div *ngIf="control.hasError('email')">Email is invalid</div>

    PS 方法内的行hasError与类的静态属性直接相关Validators。也就是说，如果您使用正则表达式进行验证：

    Validators.pattern('^[a-zA-Z]+$')

    该错误可以通过control.hasError('pattern').

    • 2

相关问题