程式設計師雜談 - 如何使用 MEAN：Angular 表單

由Ted Neward | 2017 年 11 月

Ted Neward

歡迎回來，MEANers。
所有在此數列，焦點一直 Angular; 有關具體而言，使用 Angular 來顯示資料並透過多個頁面的路由。如往常般的網頁瀏覽器已建置為能夠顯示的資料，不過，能夠收集資料，並將它傳遞至伺服器，也能用於而且為止，已經遺漏討論。

角度可以直接擷取資料透過表單，但這麼做是很難解釋觸控 — 不相當大的語法建立和定義瀏覽器表單，但在一個特定層面的基礎行為，稍後再經過。但我們並未放之前 horse 購物車。討論一些簡單的表單定義和擷取的時間。

正確的元件

在先前的資料行，我談論如何繫結」範本陳述式」（若要使用的角度術語）角度的元件所提供的事件。最常見的範例會擷取 < 按鈕 > 項目，來叫用方法，以角度元件上的按一下事件：

<button (click)="console.log('Clicked')">Push me!</button>

在和本身的這是很好，但它並不提供任何設備擷取輸入 — 為了讓這個值是適用於資料輸入，其中一個操作已發生：其中一個元件中的程式碼能夠從元件（這是 ASP.NET Web Form，其他的架構，在將執行的動作）或叫用的程式碼內的頁面上的控制項必須是能夠接收輸入的資料做為參數的參考。不過，這可能需要幾個不同的形式。

第一個和大部分的泛型，角度範本陳述式可以參考 $event 物件基本上是 DOM 事件物件的使用者工作階段期間所產生。這只需要陳述式中，參考參數，例如：

<button (click)="capture($event)" >Save</button>

缺點，不過，已傳遞的物件是 DOM 事件，代表使用者的動作;在此情況下，MouseEvent，追蹤螢幕上的位置，其中已按下滑鼠，而且實際上不會擷取狀態的頁面上的其他項目。雖然會確實是可行的巡覽 DOM 階層以尋找控制項項目，並從中擷取值，它也是不真的 Angular 方式。元件應該加以隔離開 DOM，而且範本陳述式應該能夠取得它所需要的資料，並傳遞至方法中使用之元件上。

這個方法會建議 Angular 需要某種方式來識別在頁面上，輸入的欄位，好讓範本陳述式可以提取的值，並將它們傳遞。若要能夠識別表單項目需要的形式為「識別碼」上的 < p > 項目本身，Angular 呼叫」範本參考變數」。像某些其他角度的語法，它會刻意使用看起來不像 HTML 的語法：

<input #firstName>

這會建立輸入欄位，在 HTML 中，根據標準 HTML 標記的名稱相同，但是再導入新的變數納入範本的範圍，稱為 firstName，您可以從繫結至欄位的事件範本陳述式參考，如下所示:

<button (click)="addSpeaker(firstName, lastName)" >Save</button>

這是非常簡單易懂：在按鈕上按一下，叫用 addSpeaker 方法的元件，傳入的 firstName 和 lastName 的變數，因此，如下所示圖 1。

圖 1 叫用 addSpeaker 方法

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-speaker-edit',
templateUrl: './speaker-edit.component.html',
styleUrls: ['./speaker-edit.component.css']
})
export class SpeakerEditComponent implements OnInit {
constructor() { }
ngOnInit() { }
addSpeaker(fname: string, lname: string) {
console.log("addSpeaker(", fname, ",", lname, ")")
}
}

不過，撰寫如下，顯示在瀏覽器的主控台不是從輸入; 預期的字串相反地，例如 < 輸入 _ngcontent-crf-2 > 的值會出現來取代每個這些值。原因很簡單：瀏覽器主控台傳回 DOM 項目，而不是輸入的資料中所輸入的實際角度表示。方案也一樣簡單：請使用範本陳述式的每一端上的「值」屬性來取得使用者輸入的資料。

因此，如果我需要建置的元件建立新的喇叭，我可以建立具有（按一下）會顯示兩個 < 輸入 > 欄位，< 按鈕 > 元件的呼叫 addSpeaker，傳入 firstName.value 和 lastName.value，並使用該方法來叫用（從之前的文章） SpeakerService 將它儲存到資料庫。這個概念的「建立新的喇叭」的概念非常接近「編輯現有的喇叭，「許多，因此，有些新式資料庫已經開始討論為基本上是同一個 insert 和 update 作業，但是： upsert。應該很不錯，和元件導向 — 如果 SpeakerEdit 元件可做為建立或編輯在相同的元件。

這點受惠 @Input 和 @Output 指示詞之前，您所見的電源，這是實際執行易如反掌。加入一個傳入，和 @Output 欄位讓他人知道當使用者按一下 [儲存喇叭 @Input 欄位。（後者，如果不是需要您進行決策 SpeakerEdit 元件一律會儲存到資料庫，而且沒有任何其他元件的用戶端會想要的動作。也就是在小組會議高的即時線上交談。）

這與我離開圖 2 SpeakerEdit 元件程式碼。

圖 2 SpeakerEdit 元件

export class SpeakerEditComponent implements OnInit {
@Input() speaker: Speaker;
@Output() onSave = new EventEmitter<Speaker>();
constructor(private speakerService: SpeakerService) { }
ngOnInit() {
if (this.speaker === undefined) {
this.speaker = new Speaker();
}
}
save(fn: string, ln: string) {
this.speaker.firstName = fn;
this.speaker.lastName = ln;
this.onSave.emit(this.speaker);
}
}

而且，如您預期指定我設計技巧，範本是正式基本但功能：

<div>
Speaker Details: <br>
FirstName: <input #firstName><br>
LastName:  <input #lastName><br>
<button (click)="save(firstName.value, lastName.value)">Save</button>
</div>

同樣地，請注意，我使用「.value"擷取超出 firstName 和 lastName 的輸入欄位的字串值。

（在此練習中，從主要 AppComponent）使用此元件是很直接的：

<h3>Create a new Speaker</h3>
<app-speaker-edit (onSave)="speakerSvc.save($event)"></app-speaker-edit>

在此情況下，選取將儲存在元件中，從喇叭，但讓用戶端從發出的事件。SpeakerSvc 物件是相依性插入 SpeakerService，從上在 Angular 中建置服務的上一個文件 (msdn.microsoft.com/magazine/mt826349)。

這是哪些元件化購買您：建立 UI，您可以卸除中與只使用，而不必考慮如何在內部運作的「控制項」的功能。

引發事件

應該不錯包裝在這裡，但還有一個值得注意的 Angular 中事件的相關陷阱。它是很常見的開發人員想要捕捉之類的按鍵輸入和輸入的資料回應，例如，若要顯示某些自動完成建議值。傳統的 DOM 事件，這是 onBlur 或 onKeyUp 之類的方法。例如，假設應該不錯來追蹤每個按鍵輸入和顯示使用者輸入。開發人員新 Angular 可能預期此工作：

@Component({
  selector: 'loop-back',
  template: `
    <input #box>
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }

當執行時，不過，這段程式碼不會顯示每個字元依照其輸入，事實上，它將不完全。這是因為 Angular 將不會引發事件，除非瀏覽器就會引發事件。基於這個原因，Angular 需要事件引發時，即使程式碼取得引發該事件中完成無作業，例如範本陳述式 0，像是：

@Component({
  selector: 'loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }

請注意「 keyup 」繫結。這樣做會告知按鍵輸入項目上的事件註冊 Angular 點，並讓 Angular 機會觸發程序事件，然後將更新的檢視。它是事件的能夠在第一個，但這種方式 Angular 隨時為任何種類不事件的輪詢，因此，不需要使用相當有這麼多的 CPU 循環使用說話。

總結

有些資深的 Web 開發人員可能會發現這所有有點混淆而造成不便：「為什麼無法只回到良好驚訝 HTML 表單？」 Angular 方法不一定顯而易見的事情，但在許多方面，一旦推理和解釋一目了然，通常是容易了解與合理。在此特定情況下，Angular 方式是元件的概念和考慮，以建構可使用"constructs"知道如何擷取輸入，並加以處理。這可讓某種程度的彈性真的中未出現的"舊 Web"的想法，例如包含在單一頁面上的多個這類元件的方式。（當您必須重新整理整頁顯示的結果時，您最後會有一個輸入驗證-儲存-呈現循環，每個輸入的需求。）

不過，有一些其他問題，例如了解如何更新系統其他部分，當使用者編輯現有的喇叭。角度都有一個解決方案，但有幾個步驟，才能取得反應靈敏的程式設計世界移。首頁 stretch 附近，不過，因此堅持我的其他幾個。但是，如往常，請在同時...祝您！

Ted Neward* 是西雅圖 polytechnology 顧問、喇叭和指導，目前正在處理的開發人員關聯在 Smartsheet.com 主管為。他有寫入有大量的文件、撰寫，而且具有兩位作者數十個書籍和世界各地的運作方式。連線到他處ted@tedneward.com或讀取在他的部落格blogs.tedneward.com。*

非常感謝下列 Microsoft 技術專家檢閱這篇文章：James Bender

MSDN Magazine 論壇中的這篇文章的討論

程式設計師雜談 - 如何使用 MEAN：Angular 表單

正確的元件

引發事件

總結

其他資源