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('');

<input type="text" [formControl]="name">

 

2⃣️FormGroup使用步骤大全

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

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

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

<form [formGroup]="profileForm"> <label for=""> First Name: <input type="text" formControlName="firstName"> </label> <label for=""> Last Name: <input type="text" formControlName="lastName"> </label> </form>

 

• 表单提交事件：(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代码

<form [formGroup]="profileForm" #formDirective="ngForm" >
<div>firstName:<input type="text" formControlName="firstName"></div>


    <div>lastName:<input type="text" formControlName="lastName"></div>
    <div formGroupName="address">
        address:
        <div>street: <input type="text" formControlName="street"></div>
        <div>city: <input type="text" formControlName="city"></div>
        <div>state: <input type="text" formControlName="state"></div>
        <div>zip: <input type="text" formControlName="zip"></div>
    </div>
    <div>
        <label for="man">男：<input type="radio" id="man" formControlName="sex" value="1"></label>
        <label for="woman">女：<input type="radio" id="woman" formControlName="sex" value="2"></label>
    </div>
    <div >
        <select name="" id="" formControlName="hobbies">
            <option  *ngFor="let items of hobbiesList;" [value]="items" >{{items}}</option>
        </select>
    </div>
    <div>
        <textarea name="" id="" cols="30" rows="10" formControlName="note"></textarea>
    </div>
    <div>
        {{profileForm.value | json}}
    </div>
    <button type="submit">提 交</button>
</form>

 select option循环

<mat-select formControlName="monStart" [disabled]="monClose == 1 ? false : true" (selectionChange)="checkDateRange(1)">
    <mat-option *ngFor="let selected of times" [(value)]="selected">
            {{selected.name}}
      </mat-option>
</mat-select>

 

 获取值：this.profileForm.controls.firstName.value

 

表单验证

• 在需要的组件中引入Validators ：import { Validators } from "@angular/forms";
• 在表单定义中添加validators属性 

 

　　　　profileForm=this.fb.group({

　　　　　　firstName:['',Validators.required]

　　　　})

• 通过status判断表单是否有效：profileForm.status（valid？invalid）