Question

有没有办法在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就可以了。你能帮我解决这个问题吗？谢谢。

Answer 1

<app-form-group-control-validation-display  [formGroup]="subscriptionForm" [propertyName]="'UserName'" [custom]="[{'required':'This field is required !'}]">
                        </app-form-group-control-validation-display>

Answer 2

使用此代码

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

如何更改Angular Validators中所需的验证消息

2 个答案: