Отображение пользовательского неверного сообщения в угловых 2

Question

Моя форма работает. Он может обнаружить действительное и недействительное поле ввода. Что мне нужно сделать, это показать мою пользовательскую проверку «Пароль недействителен», если поле ввода недействительно. Пожалуйста, смотрите мой код ниже для .html и .ts

<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" placeholder="Enter Username">
        <!-- <label for="UserName">Your UserName</label> mdbInputDirective-->
        <div style="color: gray" *ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched" >
            Username 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" placeholder="Enter Firstname">
        <!-- <label for="FirstName">Your First name</label> -->
        </div>
    </div>
    <div class="col-md-6">
        <div class="md-form">
        <i class="fa fa-user-secret prefix grey-text"></i>
        <input type="password" id="Password" formControlName="Password" class="form-control" placeholder="Enter Password">
        <!-- <label for="Password">Your password</label> -->
        </div>
        <div style="color: gray" *ngIf="subscriptionForm.get('Password').hasError('required') && subscriptionForm.get('Password').touched" >
            Password is required.
        </div>
        <div style="color: gray" *ngIf="!subscriptionForm.get('Password').hasError('valid') && subscriptionForm.get('Password').dirty" >
            Password is invalid.
        </div>
    </div>
    </div>

</form>

constructor(private fb: FormBuilder) { }

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

Answer 1

У вас нет валидатора, который выдает допустимую ошибку, попробуйте добавить валидатор регулярных выражений для проверки пароля по определенным критериям

this.subscriptionForm = this.fb.group({
    UserName: [null, Validators.required],
    Password: [null, [Validators.required,Validators.pattern('[A-Za-z]{8,}')],
    Email: [null, Validators.required],
    FirstName: [null, Validators.required],
    LastName: [null, Validators.required]
});

В HTML-шаблоне просто измените действительный шаблон

 <div style="color: gray" *ngIf="!subscriptionForm.get('Password').hasError('pattern') 
                                  && subscriptionForm.get('Password').dirty" >
        Password is invalid.
    </div>