ngModel in template driven窗格Angular 2

我是Angular 2的新手，並試圖學習它。我正在通過一些YouTube視頻學習，當我學習模板驅動的表單時，我遇到了一種我無法理解的情況。ngModel in template driven窗格Angular 2

在有在其中創建一個形式和每個輸入元件被給予ngModel屬性，但我無法理解這種形式寫入ngmodel的目的的示例的視頻之一 - >

下面

是完整的表單代碼： -

<div class="container"> 
<div [class.myClass]="applyClass" > 
<h1>First Form</h1> 
</div> 
<form #userFrom="ngForm" novalidate (submit)="onsubmit(userFrom)"> 
<div class="form-group"> 
<label>Student id</label> 
<input type= "text" #_idRef class="form-control" name="id" ngModel> 
<span>{{_idRef.className}}</span> 
</div>  

<div class="form-group"> 
<label>Student Name</label> 
<input type= "text" class="form-control" name="sname" ngModel>  
</div> 

<div class="form-group"> 
<label>Street</label> 
<input type= "text" class="form-control" name="street" ngModel>  
</div> 


<div class="form-group"> 
<label>City</label> 
<input type= "text" class="form-control" name="city" ngModel>  
</div> 


<div class="form-group"> 
<label>Postal Code</label> 
<input type= "text" class="form-control" name="pcode" ngModel>  
</div> 

<button class="btn btn-primary">SUBMIT</button> 
</form>  
</div>

請讓我知道爲什麼NG模型在上面代碼的每個輸入元素使用？視頻中的人解釋說，它將每個輸入元素與表單綁定，但我無法理解它是如何綁定的，確切的流程？我應該把它看作是一種語法嗎？請幫助我解決這個問題

來源

2017-05-31 user3668556

來自官方文檔：* NgForm指令補充表單元素的附加功能。它包含您爲具有'ngModel'指令和'name'屬性的元素創建的控件，並監視它們的屬性，包括它們的有效性*所以這就是爲什麼你需要它。就像使用ngModel綁定變量一樣，您需要將表單控件綁定到表單。如果沒有'name'屬性和'ngModel'，你最終會得到一個空的表單對象，因爲你沒有綁定任何東西。 – Alex

NgModel不是您使用的每個輸入元素的先決條件。請看看angular official doc

另外rangle.io有很多關於ng2的東西，很好解釋。

通常ngModel僅用於雙向數據綁定，在必要的地方。 Angular 2默認支持單向數據綁定

來源

2017-05-31 13:15:56

這個答案只是錯誤的。你需要'ngModel'來將它綁定到表單上，它甚至在你鏈接的文檔中說明它（我從中選擇了我的評論的摘錄） – Alex

ngModel in template driven窗格Angular 2

回答

相關問題