創建包含組件的Angular表單的最佳方式是什麼？

我正在構建一個很長的表單。有問題的表格有3個主要部分，出於維護原因，我想使用3個組件清理模板。創建包含組件的Angular表單的最佳方式是什麼？

問題是，當您更新組件的輸入時，包含這些組件的表單模型不會更新，因此不會使用Angular的「本機」表單驗證程序進行驗證。

我想到使用服務將這些組件的數據「共享」到父窗體，但是這並不能提供驗證器。

然後我認爲我可以使用組件綁定來傳遞窗體模型，但這聽起來像是太多的工作，或者是一些髒東西。

那麼執行此操作的最佳做法是什麼？

僞代碼示例：

<form> 
    <component-1/> <!-- how do I get data out of there, and into the form model --> 
    <component-2/> <!-- how do I validate the inputs inside the components using angular --> 
    <component-3/> 
    <button type="submit">Submit</button> 
</form>

來源

2016-08-09 justinledouxweb

我認爲你可以使用** angular-material **uı組件框架和「** ng-messages **」進行驗證。 – oguzhan00

我不想依賴一個插件。 – justinledouxweb

「，當你更新組件的輸入時，包含這些組件的表單模型不會更新」......你究竟是什麼意思？發佈一些你如何獲得表單的示例代碼+組件模板+綁定設置可能需要在這裏獲得有用的響應。 – plong0

確定。我對此進行了一些嘗試，並發現了這一點。

父窗體：

<form name="form" ng-submit="$ctrl.submit(form)> 
    <component-1></component-1> 
</form>

組件-1表單元素：

<fieldset ng-form="child-form"> 
    <input 
     type="text" 
     name="first-name" 
     id="first-name" 
     ng-model="$ctrl.sharedService.formData.name"> 
</fieldset>

沒有「本地」的方式來「同步」，從子組件模型到父母的成分，除非你使用=綁定（這對組件顯然是不好的做法，因爲它們應該是無狀態的，或者如果您想模仿Angular 2組件）。

也就是說，當您提交父表單時，Angular會爲您提供包含子表單的表單對象（該屬性將是組件的ng-form中的名稱）。

這樣就可以檢查$valid，$error，等...

最後，所以保存，或同步分量輸入值，我們可以保存可用於共享服務對象的形式輸入值編寫$http調用以將值保存到您的後端。

來源

2016-08-10 16:08:50 justinledouxweb

創建包含組件的Angular表單的最佳方式是什麼？

回答

相關問題