Angular 2：Multiple Form

我有一個包含子組件的組件。每個孩子都包含一個使用FormBuilder構建的表單。爲了清楚起見，我在組件中包含了JADE模板。此外，我使用組件路由器加載子組件。Angular 2：Multiple Form

@Component({ 
    selector: 'parent', 
    template: ` 
     .detail-page 
      .detail-header 
       .ui.secondary.menu.inverted.orange 
        .item Inquiry Details 
        .right.menu 
         a.item((click)='add($event)') 
          i.plus.icon 
         a.item((click)='save($event)') 
          i.save.icon 
      .detail-content 
       router-outlet 
      .detail-footer 
       a.item([routerLink]="['Child1']") 
       a.item([routerLink]="['Child2']") 
    ` 
}) 
@RouteConfig([ 
    { path: '/child1',     name: 'Child1',     component: Child1,   useAsDefault: true }, 
    { path: '/child2',     name: 'Child2',     component: Child2 } 
]) 
export class Parent { 

    save(event) { 
     event.preventDefault(); 

     // validate all child forms 
     ??????? 
    } 

} 

@Component({ 
    template: ` 
     form([ngFormModel]='childForm1') 
      input(type='text', [control]="field1") 
      input(type='text', [control]="field2") 
    ` 
}) 
export class Child1 { 

    constructor(
     private _formBuilder: FormBuilder 
    ) { 
     this.childForm1 = this._formBuilder.group({ 
      field1: this.field1, 
      field2: this.field2 
     }); 
    } 

} 

@Component({ 
    template: ` 
     form([ngFormModel]='childForm2') 
      input(type='text', [control]="field1") 
      input(type='text', [control]="field2") 
    ` 
}) 
export class Child2 { 

    constructor(
     private _formBuilder: FormBuilder 
    ) { 
     this.childForm2 = this._formBuilder.group({ 
      field1: this.field1, 
      field2: this.field2 
     }); 
    } 

}

我需要在按下保存按鈕時驗證所有子窗體。

據我所知，只有一個子組件在路由結束時被激活/初始化。因此我無法遍歷組件來驗證表單。

什麼是設計這樣一個組件它不是用戶友好的有一個較長的垂直形式，但它分解成易於管理的子窗體組件的最佳方法？
有沒有辦法重新使用創建的組件？

我在想我可以使用動態組件加載器，但仍然只能訪問當前加載的組件。

非常感謝您的建議/幫助。

謝謝

來源

2016-04-22 freshprinze

如何僅一次添加所有組件顯示一部分，而隱藏其餘部分？ –

隱藏我的意思是'[hidden] =「true'而不是'* ngIf =」false「'（它能夠有效地將內容從DOM中刪除） –

感謝您的及時回覆！我更新了我的問題，點擊加載組件，你的意思是讓所有的子模板都加載到父模板本身，並以某種方式隱藏某個特定的部分？我可以嘗試一下，孩子的形式有點冗長，但我也會試試。 – freshprinze

您可以一次添加各種形式和只顯示一個選擇其中一次使用

[hidden]="someExpression"

您仍然可以包裝組件中的部分保持的模板的大小父小，但驗證只運行在DOM中實際存在的元素上。（如果您將表單的一部分封裝到組件中，那麼這些組件中的表單將單獨驗證，並且您必須收集結果以獲取整個狀態。）

來源

2016-04-23 10:13:15

Angular 2：Multiple Form

回答

相關問題