Angular 2将html附加到正文

Question

我开发了一个 Angular cli 项目并获得了很多表单来验证。我需要在显示时将表单验证消息附加到 app-root 之外。 我目前的实现如下。

  <app-root class="" _nghost-c0="" ng-version="4.3.4">
  <!-- other html content goes here...... -->
        <form [formGroup]="form">
           <label for="name">Name: </label>
           <input type="text" [formControl]="nameCtrl"/>
              <div *ngIf="!nameCtrl.valid && nameCtrl.hasError('required')"
                     class="error"><validation-msg>Name is required.</validation-msg></div>
              <div *ngIf="!nameCtrl.valid && nameCtrl.hasError('badName')"
                     class="error"><validation-msg>Name must start with <tt>pee</tt>.</validation-msg></div>
         </form>
  <!-- other html content goes here...... -->
    </app-root>

我只需要在显示时在 html 中显示如下错误消息。 validation-msg 是一个带有简单模板的组件。该内容必须附加到应用根目录之外。

    <app-root class="" _nghost-c0="" ng-version="4.3.4">
      <!-- other html content goes here...... -->
    </app-root>
    <validation-msg-content>
      <div>Name is required.</div>
    </validation-msg-content>

Answer 1

如果是主要组件，那么您将无法执行此操作。但是如果这个表单本身就是一个组件，那么您可以将错误消息发送到包含该表单组件的父组件。

您需要在表单组件中使用@Output 和一个可以向父组件发出错误消息的事件发射器。现在，当父组件收到事件时，它可以显示错误消息。

所以表单组件代码应该是这样的：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'myform',
    templateUrl: './myform.component.html',
    styleUrls: ['./myform.component.css']
})

export class MyFormComponent  {
   @Output() sendData:any = new EventEmitter();

   validateForm(){
       this.sendData.emit({error});
   }

}

以及父组件HTML

<myform (sendData)="getError($event)"></myform>

现在您可以将 getError 方法定义为：

getError(event:Event){
    //Do whatever you want
}