Angualr 2 - 具有來自不同組件的自定義輸入的表單

我正在構建帶有模板驅動的角度2表單並嘗試重新使用我製作的自定義輸入。Angualr 2 - 具有來自不同組件的自定義輸入的表單

所以我有一個看起來像一個主要組件：

<form (ngSubmit)="onSubmit(f.value)" #f="ngForm"> 

     <custom-input></custom-input> 

     <button class="btn btn-submit" [ngClass]="{disabled : !f.valid} ">Sign In</button> 
    </form>

的問題是，在UI做工精細，並輸入驗證也工作，但定製輸入是不是一個真正的成員的形式，所以我不能在我的onSubmit（）方法中使用它的值。輸入無效時也無法將表單設置爲無效。

我的自定義輸入代碼如下所示：

定製component.component.ts：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'custom-input', 
    templateUrl: './custom-component.component.html', 
    styleUrls: ['./custom-component.component.scss'] 
}) 
export class CustomComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

}

和HTML看起來像這樣：

<div class="input-div"> 
    <input ngModel name="email" placeholder="Email" type="email" #email="ngModel" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"> 
    <span class="v" *ngIf="email.valid && email.touched"> 
        &#10004; 
         </span> 
    <span class="down-placeholder errormsg" *ngIf="!email.valid && email.touched && email.errors.required"> Please enter your email. </span> 
    <span class="down-placeholder errormsg" *ngIf="!email.valid && email.touched && email.errors.pattern"> Please enter a valid email. </span> 
</div>

感謝幫助！

來源

2017-01-05 Eliran Els