13.《Angular模版式表单》

一、使用模版式表单

把 HTML 表单控件（比如 和 ）放进组件模板中，并用 ngModel 等指令把它们绑定到组件中数据模型的属性上。

你不用自己创建 Angular 表单控件对象。Angular 指令会使用数据绑定中的信息创建它们。 你不用自己推送和拉取数据。Angular 使用 ngModel 来替你管理它们。 当用户做出修改时，Angular 会据此更新可变的数据模型。

因此，ngModel 并不是 ReactiveFormsModule 模块的一部分。

虽然这意味着组件中的代码更少，但是模板驱动表单是异步工作的，这可能在更高级的场景中让开发复杂化。

二、代码示例

//新建项目
ng new form-test

//新建模板表单组件
ng g component form1

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { Form1Component } from './form1/form1.component';
import {FormsModule} from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent,
    Form1Component
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//app.component.html

//form1.compontent.html

  
用户名:

密码：

确认密码:

电话：

{{userName.value}}

//form1.compontent.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-form1', templateUrl: './form1.component.html', styleUrls: ['./form1.component.css'] }) export class Form1Component implements OnInit { constructor() { } ngOnInit() { } onSubmit(value) { console.log(value); } }

运行结果：

运行结果1.png

#myForm是模板变量，myForm变量可以自定义，但是如果是表单文件，#myForm后面的值'ngForm'是固定的。

ngModelGroup 让 form表单的数据化。