Angular 表单 NgForm 指令

在本文中，我们将了解 Angular 10 中的 NgForm 是什么以及如何使用它。 NgForm用于创建顶级表单组实例，并将表单绑定到给定的表单值。

句法：

NgModule：NgForm使用的模块是：

• 表单模块

选择器：

• [ngForm]

方法：

• 创建要使用的 Angular 应用程序
• 在 app.module.ts 中导入 FormsModule。
• 在 app.component.html 中创建一个表单并将其值存储在 ngForm 变量中，并以 JSON 形式显示其值。
• 使用 ng serve 为 Angular 应用程序提供服务以查看输出。

示例 1：

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   
import { AppComponent }   from './app.component';
   
@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
      
  ]
})
export class AppModule { }

app.component.html

  {{ gfgform.value | json }}
  

  

  Name: 
  Email: 

输出：

参考： https ://angular.io/api/forms/NgForm