要使用表单模块

在 app.module.ts 中，引入 FormsModule

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [ 省略 ],
  imports: [
    FormsModule
  ],
  providers: [ 省略 ],
  bootstrap: [ 省略 ]
})

模板驱动式：双向绑定

将组件的类变量值与表单值同步的机制。
例如，当在屏幕上输入的值要反映到类变量中时，可以使用这种机制。反之亦然。
由于模板驱动形式绑定了值，因此被称为模板驱动表单。
在下面的示例中，输入值将显示在上方。

组件TS文件

xyz:string = "abc";

组件HTML文件

xyz: {{xyz}}<br>
<input type="text" [(ngModel)]="xyz">

响应式表单

在组件类中，准备模型并将其设置在模板中的方法被称为响应式表单。

使用方法

在 app.module.ts 中，需要导入 ReactiveFormsModule。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [ 省略 ],
  imports: [
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [ 省略 ],
  bootstrap: [ 省略 ]
})

表单控件

在组件的TS文件中，定义一个FormControl类的变量。
当按钮被点击时，还实现一个名为show()的方法，用于在屏幕上显示FormControl变量的值。

sampleControl:FormControl = new FormControl('Sample');
message:string = "";

show() {
  this.message = sampleControl.value;
}

在组件的HTML文件中，我们需要在formControl属性中指定一个已定义的变量。
当表单控件的输入值被按钮点击时，将其显示在消息中。

<p>{{message}}</p>
<input type="text" [formControl]="sampleControl" />
<button (click)="show()">Click</button>

表单组

当仅使用 FormControl 时，为每个输入项目创建变量并单独管理是相当麻烦的。在这种情况下，FormGroup 可以将整个表单作为一个整体进行管理。

组件 TS 文件

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({ 省略 })
export class ...Component implements OnInit {
  sampleGroupForm:FormGroup;
  ngOnInit() {
    this.sampleGroupForm = new FormGroup({
      name: new FormControl(''),
      mail: new FormControl(''),
      age: new FormControl(0),
    });
  }
}

组件HTML文件

<form [formGroup]="プロパティ" (ngSubmit)="メソッド">
  <input type="text" formControlName="名前" />
  <input type="submit" value="登録">
</form>

在参考书中，当使用响应式表单时，提到使用(ngSubmit)=””而不是(submit)=””，但是也有一些示例使用(submit)，让我感到困惑，不知道原因…

在该网站上，有一个使用了 (ngSubmit) 的示例。
链接：https://angular.jp/start/start-forms

不知道是否需要区分使用，或者两者都可以。

formControl根据关联的标签类型（ ,）而更改值。例如，将变为布尔值。

表單生成器

使用FormBuilder的方法比使用FormGroup更加简洁易操作。

组件TS文件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({ 省略 })
export class ...Component implements OnInit {
  fg:FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.fg = this.fb.group({
      name: [''],
      mail: [''],
      age: [0]
    });
  }
}

相关文章

• Angular はじめに覚えること

• Angular フォーム (2)：バリデーション

Angular 次に覚えること

请参考以下资料

• 『Angular超入門』 著者：掌田 津邪乃

https://angular.jp/start