使用組件的角度2表單級別驗證

在Angular 2中，如何在自定義組件中添加一個輸入控件，該組件將綁定到父組件的表單控件容器？（下面的代碼簡化爲簡潔起見）使用組件的角度2表單級別驗證

例如，我有一個表格組件（請注意禁用按鈕綁定），以

@Component{ 
selector:'my-form', 
template:' 
<form [ng-form-model]="myForm"> 
    <my-special-input></my-special-input> 
</form> 
<button [disabled]="!myForm.valid"> 
' 
}

現在在我的特殊輸入組件，我想

@component{ 
selector:'my-special-input' 
template:' 
    <input ng-control='name' required> 
}'

ng-control ='name'產生錯誤「沒有ControlContainer的提供者！」 我已經搜索的解決方案，並沒有發現任何將允許父窗體控件容器驗證。

我想創建一個被添加到一個表單控件容器定製可重用的輸入組件將在角2

一個常見的場景我不能像有沒有辦法在自定義組件添加輸入到父表單組件的方式可以啓用表單級別驗證。

來源

2016-01-24 JeffC

爲什麼你不輸入指令呢？ –

不知道我的問題是否正確，但如果您正在尋找類似於Angular 1的'transclude'的東西，即從您的主機視圖中取出一塊DOM，並將它移動到您的自定義組件中，則可以查找Angular 2的'' – superjos

不知道這是否是您的方案的最佳方式，但我認爲它的工作原理。

您可以在父元素上創建Control並將其作爲@Input傳遞給子元素。然後，孩子可以將其用作表單元素上的控件。

例如（plunk）：

@Component({ 
    selector:'my-special-input' 
    template:` 
     <input type="text" [ngFormControl]='nameControl' > 
    ` 
}) 
export class specialInputComponent implements OnInit{ 
    @Input() nameControl; 
} 

@Component({ 
    selector:'my-form', 
    template:` 
    <form [ngFormModel]="myForm" > 
     <my-special-input [nameControl]="nameControl"></my-special-input> 
    </form> 
    <button [disabled]="!myForm.valid">Submit</button> 
    `, 
    directives: [specialInputComponent] 
}) 
export class formComponent{ 
    nameControl:Control; 
    myForm: ControlGroup; 

    constructor(){ 
     this.nameControl = new Control("", Validators.required); 
     this.myForm = new ControlGroup({special: this.nameControl}); 
     } 
}

你也許還通過ControlGroup給孩子，讓孩子添加本身addControl()，但你可能要應對更新週期開始有點凌亂。

來源

2016-01-24 21:35:58

謝謝！那可行。我嘗試了另一種方式，將表單傳遞給組件/指令，但無法使其工作。 – JeffC

很高興工作。我希望這是一個更好的答案。我覺得必須有更好的方法，特別是如果你想在你的自定義組件中封裝控制行爲。我希望別人會唱歌。 –

使用組件的角度2表單級別驗證

回答

相關問題