如何在 Angular 中获取表单的值？

在本文中，我们将了解如何在 Angular 10 中从表单中获取值。我们将使用 AbstractControl value 属性来获取对象中的表单值。

句法：

form.value

返回值：

• object：它是一个包含表单值的对象

方法：

• 创建要使用的 Angular 应用程序
• 在 app.component.html 中使用 ngForm 指令创建一个表单。
• 现在使用 AbstractControl value 属性获取值
• 使用 ng serve 为 Angular 应用程序提供服务以查看输出。

示例 1：

app.component.ts

import { NgModule } from '@angular/core';
  
// Importing forms module
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

      
    

    

    Name: 
    Date: 

{{ gfg.value | json }}

输出：

参考： https://angular.io/api/forms/AbstractControlDirective#value