Angular 2 căn bản - Bài 15: Xây dựng Form từ template

Bài học này chúng ta sẽ học cách xây dựng form với Template trong Angular 2.

Xây dựng trang template HTML:

<h2>User Form</h2>

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)">
	<div class="form-group">
		<label>Name</label>
		<input type="text" class="form-control" name="name" ngModel/>
	</div>
	<div class="form-group">
		<label>Email</label>
		<input type="text" class="form-control" name="email" ngModel/>
	</div>
	<div ngModelGroup="address">
		<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="postalCode" ngModel/>
		</div>
	</div>

	<button type="submit" class="btn btn-primary">Submit</button>
</form>

Sự kiện submit để lấy giá trị form:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
})
export class AppComponent {
  onSubmit(value: any) {
    console.log(value);
  }
}

Chi tiết xem tại video:

Tác giả: Bạch Ngọc Toàn

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.