angleディレクティブのhostプロパティを使用してフォームを送信するにはどうすればよいですか？ユニットテストにも適していますか？

Question

私はインターネットでたくさんの検索をしましたが、私はどこでもこのようなものは見つけられませんでした。私は失われているかもしれないし、それについて何も知らない。

質問です：

ディレクティブのメタデータのホストプロパティを使用してフォームを送信するためにどのように？ここで

は私のフォームテンプレートを行く：

<form #userlogin="ngForm" [class.hidden]="!isActiveTab" login-form novalidate> 
    <h3>System Login</h3> 
    <ul> 
    <li><input type="text" name="email" id="email" placeholder="Email" class="form-control"></li> 
    <li><input type="password" name="password" id="password" placeholder="Password" class="form-control"></li> 
    <li><button type="submit" class="btn btn-success">Login</button></li> 
    </ul> 
</form> 

あなたが見ることができるように、私はフォーム要素login-formのディレクティブを配置していると私はディレクティブ作成しました：だから

import { Directive, Renderer2, ElementRef } from '@angular/core'; 

@Directive({ 
    selector: '[login-form]', 
    host: { 
    "(submit)": "onSubmit()" 
    } 
}) 
export class LoginformDirective { 

    constructor(private renderer: Renderer2, private el: ElementRef) {} 

    onSubmit() { 
    console.log('How to get form here!!!'); 
    } 

} 

、を私は知りたいどのようにフォームを提出するような方法ですか？ユニットテストのために良いですか？

Answer 1

あなたは単にそれを注入することができる：

export class LoginformDirective { 
    constructor(..., private form: NgForm) { ... } 

     onSubmit() { 
      this.form 
     } 

の角の各指令は、指令が適用される要素にプロバイダとしての地位を定義します。 form要素はNgFormディレクティブで対象としていた：wow ....非常に興味深いと思われる

@Directive({ 
    selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]', 
    providers: [formDirectiveProvider], 
    host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'}, 
    outputs: ['ngSubmit'], 
    exportAs: 'ngForm' 
}) 
export class NgForm extends ControlContainer ... { 
    onSubmit($event: Event): boolean { 
     (this as{submitted: boolean}).submitted = true; 
     syncPendingControls(this.form, this._directives); 
     this.ngSubmit.emit($event); 
     return false; 
    }