[Angular] 笔记 12：模板驱动表单 - ngForm

Angular For Beginners - 16. Template Driven Forms (ngForm)

Angular 以其表单模块而闻名。

Angular 有两种类型的表单： Template 以及 Reactive：

Template 表单的特点：简单，神奇，一键点击。
Reactive 表单的特点：可扩展，复杂，可测试。

多数情况下都可以使用 Template 表单，但如果需要应对用户输入伪造的数据等情况，就需要使用更为复杂的 Reactive 表单。

ngModel 在 app 中频繁出现，它不仅仅局限于表单，还可用于数据绑定。
ngForm 特定于 template 表单，用于表单初始化。

1. Template Driven Form 使用步骤

1. Build（构建）：设置 html，model 等

2. Bind (绑定) : 如下的代码使用了双向绑定

<form #form="ngForm">
  <input [(ngModel)]="modelName.property" name="property" />
</form>

3. Track（追踪）：执行简单的 validation
4. Submit（提交）

2. 生成表单组件

app 右键 -> Generate Component，名称设为 pokemon-template-form

3. pokemon.service.ts 增加一个新的函数

import {
    Injectable } from '@angular/core';
import {
    HttpClient } from '@angular/common/http';
import {
    Pokemon } from '../models/pokemon';
import {
    Observable } from 'rxjs';

const POKEMON_API = 'http://localhost:3000/pokemon';