Question

我开发了一个角度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之外。

    <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
}

Angular 2将html附加到正文

1 个答案: