Как изменить сообщение проверки требуемого в угловых валидаторах

Question

Есть ли способ изменить сообщение проверки FormBuilder в Angular? У меня есть этот код ниже, который дает «красное» слово «неправильно» всякий раз, когда поле ввода остается пустым. Валидатор работает, но я просто хочу изменить его на что-то более значимое, например «Это поле обязательно для заполнения».

<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

Используйте этот код

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

Answer 2

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