[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 (绑定) : 如下的代码使用了双向绑定

html 复制代码
<form #form="ngForm">
  <input [(ngModel)]="modelName.property" name="property" />
</form>
  1. Track(追踪):执行简单的 validation
  2. Submit(提交)

2. 生成表单组件

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

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

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';

@Injectable({
  providedIn: 'root',
})
export class PokemonService {
  constructor(private http: HttpClient) {
    console.log(this.http);
  }

  // new function
  getPokemon(id: number) {
    return this.http.get<Pokemon>(`${POKEMON_API}/1`);
  }

  getPokemons(): Observable<Pokemon[]> {
    return this.http.get<Pokemon[]>(POKEMON_API);
  }
}

4. pokemon-template-form.component.ts:

ts 复制代码
import { Component, OnInit } from '@angular/core';
import { Pokemon } from '../models/pokemon';
import { PokemonService } from '../services/pokemon.service';

@Component({
  selector: 'app-pokemon-template-form',
  templateUrl: './pokemon-template-form.component.html',
  styleUrls: ['./pokemon-template-form.component.css'],
})
export class PokemonTemplateFormComponent implements OnInit {
  pokemon!: Pokemon;

  // 引入服务
  constructor(private pokemonService: PokemonService) {}

  ngOnInit() {
    // 这部分代码放在 ngOnInit 是更好的做法,非必须。
    this.pokemonService.getPokemon(1).subscribe((data: Pokemon) => {
      this.pokemon = data;
    });
  }
}

5. 设置 HTML

其中 | 是 pipe,是一个小的 add-on, 可以加到 HTML 中,pokemon | json 意思是说,将 pokemon 以 json 格式显示。
pokemon-template-form.component.html:

html 复制代码
<form>
  Form!
</form>
MODEL: {{ pokemon | json}}

app.component.html:

html 复制代码
<app-pokemon-template-form></app-pokemon-template-form>

6. 运行 ng serve

一切正常运行:

7. 连接模板表单

html 复制代码
<form #form="ngForm">
  Form!
</form>
MODEL: {{ pokemon | json}}

如果 ngForm 出现如下错误提示:

No directive found with exportAs 'ngForm'.ngtsc(-998003)

pokemon-template-form.component.ts(5, 27): Error occurs in the template of component PokemonTemplateFormComponent.

那么在 app.module.ts 中 import FormsModule:

ts 复制代码
@NgModule({
  declarations: [AppComponent, PokemonTemplateFormComponent],
  // add FormsModule
  imports: [BrowserModule, AppRoutingModule, PokemonBaseModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

修改 pokemon-template-form.component.html:

html 复制代码
<form #form="ngForm">
  Pokemon Name:
  <input type="text" [(ngModel)]="pokemon.name" name="name" />
</form>
<div>MODEL: {{ pokemon | json }}</div>
<div>FORM: {{ form.value | json }}</div>

因为 console 会出现错误 "ERROR TypeError: Cannot read properties of undefined (reading 'name')",所以我将整段代码放在了 <div *ngIf="pokemon"> <div> 中。

html 复制代码
<div *ngIf="pokemon">  
  <form #form="ngForm">
    Pokemon Name:
    <input type="text" [(ngModel)]="pokemon.name" name="name" />
  </form>
  <div>MODEL: {{ pokemon | json }}</div>
  <div>FORM: {{ form.value | json }}</div>
</div>

运行结果:

相关推荐
知识分享小能手3 分钟前
Html5学习教程,从入门到精通,HTML5 简介语法知识点及案例代码(1)
开发语言·前端·javascript·学习·前端框架·html·html5
IT、木易6 分钟前
大白话React第二章深入理解阶段
前端·javascript·react.js
晚安72011 分钟前
Ajax相关
前端·javascript·ajax
图书馆钉子户13 分钟前
怎么使用ajax实现局部刷新
前端·ajax·okhttp
bin915329 分钟前
DeepSeek 助力 Vue 开发:打造丝滑的单选按钮(Radio Button)
前端·javascript·vue.js·ecmascript·deepseek
qianmoQ33 分钟前
第五章:工程化实践 - 第五节 - Tailwind CSS 常见问题解决方案
前端·css
那就可爱多一点点1 小时前
超高清大图渲染性能优化实战:从页面卡死到流畅加载
前端·javascript·性能优化
二进制怪兽2 小时前
[笔记] x86汇编语言:从实模式到保护模式之第四章 汇编语言和汇编软件
汇编·笔记
不能只会打代码2 小时前
六十天前端强化训练之第一天HTML5语义化标签深度解析与博客搭建实战
前端·html·html5
OpenTiny社区2 小时前
Node.js技术原理分析系列——Node.js的perf_hooks模块作用和用法
前端·node.js