时间戳

首页 > 解决方案 > 如何在 Angular Validators 中更改 required 的验证消息

angular - 如何在 Angular Validators 中更改 required 的验证消息

问题描述

有没有办法在 Angular 中更改 FormBuilder 的验证消息？我在下面有这段代码，只要输入字段留空，就会给出“红色”字“错误”。验证器有效，但我只想将其更改为更有意义的内容，例如“此字段是必需的”。

<form [formGroup]="subscriptionForm">
    <h3 style="color: gray; text-align: center;">Registration</h3>

    <div class="row">
        <div class="col-md-6">
            <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" formControlName="UserName" id="UserName" class="form-control" mdbInputDirective>
            <label for="UserName">Your UserName</label>
            <div *ngIf="subscriptionForm.get('UserName').hasError('required')">
                This field is required!
            </div>
            </div>
            <br>
            <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" formControlName="FirstName" id="FirstName" class="form-control" mdbInputDirective>
            <label for="FirstName">Your First name</label>
            </div>
        </div>
    </div>
    <br>
    <div class="row">
    <div class="col-md-12">
        <button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="onSubmit()"  [disabled]="!subscriptionForm.valid" mdbWavesEffect>Send
            <i class="fa fa-paper-plane-o ml-1"></i>
        </button>
    </div>
    </div>

</form>

constructor(private fb: FormBuilder) { }

ngOnInit() {
    this.subscriptionForm = this.fb.group({
        UserName: [null, Validators.required],
        FirstName: [null, Validators.required]
    });
}

如果您注意到我尝试创建一个 *ngIf 但不知何故，它不起作用。但是，如果我不必创建这个 *ngIf，我会更喜欢它，但如果真的没有办法做到这一点，那么 *ngIf 就可以了。你能帮我解决这个问题吗？谢谢你。

标签： angular

解决方案

使用此代码

<div *ngIf="subscriptionForm.get('UserName').errors.required">
            This field is required!
        </div>

推荐阅读