Angular 可重用的反应式表单错误验证组件不'；不要显示消息

我正在Angular 8中做一个web应用程序，我希望有一个可重用的组件，只显示FormControl的错误，以避免在很多地方重复这个逻辑。我使用的是

引导程序v4.4.1

<form [formGroup]="form" (ngSubmit)="onSubmit()">

      <div class="input-group">
        <label for="emailInput" class="sr-only">Email</label>
        <input id="emailInput"
               formControlName="email"
               type="email"
               class="form-control"
               [ngClass]="{
                  'is-invalid': form.get('email').invalid && (form.get('email').dirty || form.get('email').touched)
                  }"
               placeholder="Email"
               required
               autofocus>
        // Reusable component to show errors
        <app-error-message-container [control]="form.get('email')" errorMessagesKeyName="email"></app-error-message-container>
      </div>

      <button type="submit" class="btn btn-primary btn-block mt-3">Log in</button>

    </form>

模板

<ng-container *ngFor="let validation of errorMessages">
  <div *ngIf="control.hasError(validation.type) && (control.dirty || control.touched)"
       class="invalid-feedback">
    {{validation.message}}
  </div>
</ng-container>

我的目标是能够使用可重用组件通过引导正确地显示错误

如果有错误，输入的类将被激活，并且我看到一个红色边框，但是可重用的错误组件没有显示消息。我认为原因与引导和

class=“无效反馈”

有关

这正是原因

已从模板中删除

class=“无效反馈”

<ng-container *ngFor="let validation of errorMessages">
  <div *ngIf="control.hasError(validation.type) && (control.dirty || control.touched)">
    {{validation.message}}
  </div>
</ng-container>

问题解决了

---

快乐编码

在您的

ErrorMessageContainerComponent

中，您的

无效反馈

类的

显示

属性设置为

无

，因为它不是输入元素的同级。如果您仍然希望应用Bootstrap 4中的

无效反馈

类样式，可以使用

class=“无效反馈d-block”

手动设置显示，我已经在角材料反应形式上实现了类似的功能。您需要将验证函数作为参数传递。我将与stackblitz合作，并发布感谢您的帮助。您可以添加更多关于您做了什么以及为什么添加host属性使其工作的详细信息吗？我不明白。此外，我不知道错误模板中的

class=“invalid feedback”

不起作用的原因。请注意：TSlint说的是“使用@HostBinding或@HostListener而不是

host

metadata属性”，有什么想法吗？欢迎！必须挖掘

无效反馈

类。CSS属性的编码方式需要是

输入组的直接子项

，才能定位在其中的正确位置。将其放置在其他位置将显示：无隐藏内容。至于TSlint，您可以阅读

<form [formGroup]="form" (ngSubmit)="onSubmit()">

      <div class="input-group">
        <label for="emailInput" class="sr-only">Email</label>
        <input id="emailInput"
               formControlName="email"
               type="email"
               class="form-control"
               [ngClass]="{
                  'is-invalid': form.get('email').invalid && (form.get('email').dirty || form.get('email').touched)
                  }"
               placeholder="Email"
               required
               autofocus>
  // Is showing correctly
  <div *ngIf="form.get('email').hasError('required') && (form.get('email').dirty || form.get('email').touched)" class="invalid-feedback">
    There is an error!
  </div>
</div>

<ng-container *ngFor="let validation of errorMessages">
  <div *ngIf="control.hasError(validation.type) && (control.dirty || control.touched)">
    {{validation.message}}
  </div>
</ng-container>

@Component({
  selector: 'app-error-message-container',
  host: { class: 'invalid-feedback' },
  templateUrl: './error-message-container.component.html',
  styleUrls: ['./error-message-container.component.scss']
})
export class ErrorMessageContainerComponent implements OnInit {
  ...
}