angular cli Form表单大全

1??基础单个表单使用步骤

响应式表单和模板驱动表单都建立在下列基础类之上。

FormControl 实例用于追踪单个表单控件的值和验证状态。

FormGroup 用于追踪一个表单控件组的值和状态。

FormArray 用于追踪表单控件数组的值和状态。

ControlValueAccessor 用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建一个桥梁。

步骤

• 首先在app.module.ts中引入如下

import { ReactiveFormsModule } from "@angular/forms";

imports: [
    ReactiveFormsModule
  ]

• 再在需要的组件汇总引入如下

import { FormControl } from "@angular/forms";

  name=new FormControl('');

2??FormGroup使用步骤大全

• 同理，先在app.module.ts中引入ReactiveFormModule
• 再再需要的组件中引入如下

import { FormControl, FormGroup } from "@angular/forms";

  profileForm=new FormGroup({
    firstName:new FormControl(''),
    lastName:new FormControl('')
  })

• 表单提交事件：(ngSubmit)="onSubmit()"
• 获取表单的值：this.profileForm.value
• 给表单赋值
  • 使用 setValue() 方法来为单个控件设置新值
  • 使用 patchValue() 方法可以用对象中所定义的任何属性为表单模型进行替换
• 在formGroup中获取单个值：this.profileForm.controls.firstName.value

单个赋值：setValue():
this.name.setValue('jahoon');

多个赋值：patchValue():
this.profileForm.patchValue({
    firstName: 'Nancy',
    address: {
      street: '123 Drew Street'
    }
  });

----------------以上是基础，实战案例中请看下面??：----------------

使用FormBuilder生成服务控件

步骤：

1. 首先在app.module.ts中引入 ReactiveFormsModule

2. 导入 FormBuilder 类。

3. 注入这个 FormBuilder 服务。

4. 生成表单内容。

1、导入
import { FormControl, FormGroup, FormBuilder } from '@angular/forms';

2、注入依赖
constructor(private fb: FormBuilder) { }

3、创建
profileForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),

4、HTML代码

    
            {{selected.name}}