如何以正确的方式触发显示消息

Question

我真的不知道我在想什么。通信beetwen组件有效，我使用输入装饰器将数据从父级传递到子级。但是，单击该按钮时不会显示该消息。当提示在输入框中并且我在框外单击时显示。我需要知道错误的cos mi想法是，单击按钮时不触摸框就会显示消息。

// forgot-password.component.ts

import { Component, OnInit } from '@angular/core';
import {LoginService} from '../../services/login.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-forgot-password',
  templateUrl: './forgot-password.component.html',
  styleUrls: ['./forgot-password.component.less']
})
export class ForgotPasswordComponent implements OnInit {

  empty: boolean;
  processStarted: boolean;
  form: FormGroup;

  constructor(private loginService: LoginService, private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      email: [null, [Validators.required, Validators.email]]
    });
  }

  recoverLostPassword() {
    if (this.email.value !== null && this.email.valid) {
      this.loginService.recoverLostPassword(this.email.value).subscribe(() => {
        this.processStarted = true;
      });
    }
    if (this.email.value === null) {
      this.empty = true; // la utilizo para hacer el binding en el child component
    }
  }

  get email() { return this.form.get('email'); }

}

// forgot-password.component.html

<section>

  <div class="form" [formGroup]="form">
    <input formControlName="email" type="email" pInputText placeholder="Email">
    <lp-form-field-errors [serverErrors]="serverErrors" bindToErrorsKey="email" [control]="email" [empty]="empty"></lp-form-field-errors>
    <button pButton label="Recuperar contraseña" [disabled]="processStarted" (click)="recoverLostPassword()"></button>
    <div>
      Volver al <a [routerLink]="['login']">inicio de sesión</a>
    </div>
  </div>
  <div *ngIf="processStarted">
    <p>
      El proceso de recuperación de contraseña fue iniciado con éxito.
    </p>
    <p>
      Le hemos enviado un correo con las instrucciones para poder reestablecer la clave de su cuenta, por favor
      revise su casilla.
    </p>
  </div>

</section>

// form-field-errors.component.ts

import { ValidationResult } from '../../../model/core/validation-result';
import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl } from '@angular/forms';

@Component({
  selector: 'lp-form-field-errors',
  templateUrl: './form-field-errors.component.html',
  styleUrls: ['./form-field-errors.component.css']
})
export class FormFieldErrorsComponent implements OnInit {

  @Input()
  empty: boolean;
  @Input()
  serverErrors: ValidationResult;
  @Input()
  patternErrorMessage: string;
  @Input()
  bindToErrorsKey: string;
  @Input()
  control: AbstractControl;

  constructor() {
  }

  ngOnInit() {

  }
}

// form-field-errors.component.html

<div *ngIf="control && control.invalid && (control.dirty || control.touched)"
     class="form-field-errors-container">

  <div *ngIf="control.errors?.required || empty">
    Este campo es requerido
  </div>
  <div *ngIf="control.errors?.email">
    Ingrese un email válido
  </div>

</div>

<div *ngIf="serverErrors" class="form-field-errors-container">
  <div *ngFor="let err of serverErrors.fieldErrors[bindToErrorsKey]">
    {{err}}
  </div>
</div>