角2は本文にhtmlを追加します

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> 

表示すると、次のようなエラーメッセージが表示されます。 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をフォームコンポーネントで使用し、エラーメッセージを親コンポーネントに送信できるイベントエミッタを使用する必要があります。親コンポーネントがイベントを受信すると、エラーメッセージが表示されます。

だから、フォームコンポーネントのコードは次のように行く必要があります。

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