Angular2表單輸入 - 可以在文本

不能填滿我創建其根據當前頁面生成的形式的組分：Angular2表單輸入 - 可以在文本

<div *ngIf="checkCurrentDetails() == 'Dimension'" > 

<form [formGroup]="form"> 
<div formGroupName="name"> 
    <input formControlName="first" placeholder="First"> 
    <input formControlName="last" placeholder="Last"> 
</div> 
<input formControlName="email" placeholder="Email"> 
<button>Submit</button> 
</form> 
<p>Value: {{ form.value | json }}</p> 
<p>Validation status: {{ form.status }}</p> 


</div> 
<div *ngIf="checkCurrentDetails() == 'Dimension Attributes'" > 

<form [formGroup]="form"> 
    <div formGroupName="name"> 
    <input class="search" formControlName="first" placeholder="First"> 
    <input formControlName="last" placeholder="Last"> 
</div> 
<input formControlName="email" placeholder="Email"> 
<button>Submit</button> 
</form> 
<p>Value: {{ form.value | json }}</p> 
<p>Validation status: {{ form.status }}</p> 

</div>

通過這種測試方法：

checkCurrentDetails(){ 
     if(this.currentDetails['site'] == 'Dimension Attributes'){ 
      this.form = this.fb.group({ 
       name: this.fb.group({ 
        first: ['Nancy', Validators.minLength(2)], 
       last: 'Drew', 
      }), 
      email: '', 
     }); 
     return this.currentDetails['site']; 
    } 
    if(this.currentDetails['site'] == 'Dimension'){ 
     this.form = this.fb.group({ 
      name: this.fb.group({ 
       first: ['Nanci', Validators.minLength(2)], 
       last: 'Drew', 
      }), 
      email: '', 
     }); 
     return this.currentDetails['site']; 
    } 
}

它正在產生的形式根據現場非常好，它正在生產這種形式：

http://www.pic-upload.de/view-32540301/test.jpg.html

在文本框中，您將能夠看到預定義的測試內容。例如第一個文本框：「南慈」等但現在我的問題。我無法輸入，更改或插入文本到這些文本框。似乎有東西阻止它。

所以我嘗試了另一件事來測試它是否與表單有關。我創建了一個文本框

<input type='text'>

以外的表格，這是行之有效的。我能夠輸入文本到這個盒子，但不能輸入到表格中的文本框，我不知道爲什麼？

來源

2017-01-22 3HMonkey

你能否擴大*「不能輸入或更改這些形式的文本」 *？你不能在瀏覽器中輸入控件嗎？您的'valueChanges'訂閱是否被觸發？ – jonrsharpe

你的意思是你可以在文本框中輸入，或者你沒有看到表單中的輸入數據對象？ –

我無法在文本框中輸入文本。似乎有些東西阻止了表單的輸入。順便說一句，我能夠輸入文本到未連接到表單的文本框。 – 3HMonkey

問題出在<div *ngIf="checkCurrentDetails() == 'Dimension Attributes'">。

當您輸入文本框時，ChangeDetection將運行並重新評估模板。因此，每次鍵入文本框時，checkCurrentDetails()函數都會被調用，並且表單將被重新創建/呈現！因此，你會一次又一次地看到表單的初始狀態，並感覺到輸入被阻止。

只需將其更改爲

<div *ngIf="currentDetails.site == 'Dimension Attributes'">和它的作品！

這裏是Plunker鏈接，工作樣本： http://plnkr.co/edit/psjqZZvfx7GyOVAgkSJj?p=preview

來源

2017-01-23 11:02:07

你好，先生，謝謝你的迴應。這是行得通的，但不是解決問題的辦法。我想解釋一下。這是一個細節面板，所以我想根據站點標題來改變表單的格式：構造函數（_globalService：GlobalService，private fb：FormBuilder）this.currentDetails = _globalService.currentTitle; this.subscription = _globalService.nameChange.subscribe（（value）=> this.currentDetails = JSON.parse（value）; }）; – 3HMonkey

例如：我們有site1，site2，site3。主要組件內部是一個detailspannel.component.A全局服務正在改變網站的標題。我想根據網站標題更改詳細信息範圍內的表單。如果它是site1，則表單使用3個字段呈現。如果它的site2，可以說我需要10個字段等。 – 3HMonkey

在這種情況下，您必須執行用於決定組件代碼中表單類型的邏輯。你可以把它放在單個變量中。並用'* ngIf'或'* ngSwitch'來使用'variable'來呈現適當的表單。如果調用函數本身在'* ngIf'，Angular2的變化檢測將分別有在當前的形式發生變化時，執行它。希望你現在明白。 –

Angular2表單輸入 - 可以在文本

回答

相關問題