Angular 表单

垂慕容2024-06-11 16:48

在 Angular 中，表单有两种类型，分别为模板驱动和模型驱动。本文作为 Angular 表单处理的入门文章，带您了解 Angular 中提供的强大的表单处理机制。

1.1 模板驱动

1.1.1 概述

表单的控制逻辑写在组件模板中，适合简单的表单类型。

1.1.2 快速上手

  1. 引入依赖模块 FormsModule

    javascript 复制代码 
    import { FormsModule } from "@angular/forms"

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}

  2. 将 DOM 表单转换为 ngForm

    html 复制代码 
    <form #f="ngForm" (submit)="onSubmit(f)"></form>

  3. 声明表单字段为 ngModel

    html 复制代码 
    <form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel />
  <button type="submit">提交</button>
</form>

    input 这里必须加上 ngModel 这个指令，否则 username 这个 field 不会出现在 formref 的变量 f 中。

  4. 获取表单字段值

    javascript 复制代码 
    import { NgForm } from "@angular/forms"

export class AppComponent {
  onSubmit(form: NgForm) {
    console.log(form.value)
  }
}

    注意 formRef 的类型定义为 NgForm.

  5. 表单分组

    html 复制代码 
      <form #f="ngForm" (submit)="onSubmit(f)">
    <div ngModelGroup="usernameG">
      <input type="text" name="username" ngModel />
    </div>
    <div ngModelGroup="passwordG">
      <input type="password" name="password" ngModel />
    </div>
    <button type="submit">提交</button>
  </form>

    使用 ngModelGroup 之后 formRef.value 的数据结构也发生了相应的改变。

1.1.3 表单验证

  • required 必填字段; 但是不会自动添加*，这一点要分清楚。
  • minlength 字段最小长度。
  • maxlength 字段最大长度。
  • pattern 验证正则 例如：pattern="\d" 匹配一个数值。
html 复制代码 
<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel required pattern="\d" />
  <button type="submit">提交</button>
</form>
javascript 复制代码 
export class AppComponent {
  onSubmit(form: NgForm) {
    // 查看表单整体是否验证通过
    console.log(form.valid)
  }
}

下面这个功能在 react 中实现起来是相当困难的，但是在 angular 中就很容易[disabled]="f.invalid"。非常好用！

html 复制代码 
<!-- 表单整体未通过验证时禁用提交表单 -->
<button type="submit" [disabled]="f.invalid">提交</button>

在组件模板中显示表单项未通过时的错误信息。

html 复制代码 
  <form #f="ngForm" (submit)="onSubmit(f)">
    <div ngModelGroup="usernameG">
      <input
        type="text"
        name="username"
        #username="ngModel"
        ngModel
        required
        pattern="\d+"
      />
      <div *ngIf="username.touched && !username.valid && username.errors">
        <span *ngIf="username.errors['required']"> 请输入用户名 </span>
        <span *ngIf="username.errors['pattern']"> 用户名不合法 </span>
      </div>
    </div>
    <div ngModelGroup="passwordG">
      <input type="password" name="password" ngModel />
    </div>
    <button type="submit" [disabled]="f.invalid">提交</button>
  </form>

这里我们指定了 input 的 ref 值为 username. 注意区分其与 name="username" 的不同；紧接着，我们通过这个 ref 就可以拿到 input 的状态，是不是被修改过，是不是没有通过验证，是不是发生了错误？

只有被修改过，没有通过测试并且发生了错误的 input 才会在它的下面展示出错误信息。 上面的代码中用到的 touched errors valid errors['require'] 都不是随便写的。 注意指定 ref 的方式为 #username="ngModel"。

指定表单项未通过验证时的样式。

css 复制代码 
input.ng-touched.ng-invalid {
  border: 2px solid red;
}

总结上面的知识点：

  1. 如何指定整个表单的 ref
  2. 如何提交表单并调用 onSubmit 函数，传递表单的 ref
  3. 如何给 input 指定 ref
  4. 如何给 input 做双向绑定
  5. 如何给 input 指定 name
  6. 如何给表单元素设置校验规则
  7. 如何通过 input 的 ref 获取其状态，校验状态
  8. 如何动态显示错误提示
  9. 如何将提交按钮动态置灰
  10. 如何将表单元素分组及对应的表单数据结构
  11. 如何设置没有通过检测的 input 的提示样式
  12. 使用模板表单需要的支持 Module 有哪些

1.2 模型驱动

在使用模板表单的时候，我们是在 html 文件中构建好表单的基本结构，然后在模板中通过设定 ref 的方式获取特定表单元素或者表单信息或者给它们添加交互的。实际上在这个过程中，在看不到的地方会自动生成相对应 html 中 form 的一个数据结构，称为：表单模型。在模板驱动中，我们创建了模板，自动生成了模型。但是 html 的模板是比较固定的，不容易发生改变，这样，在需要动态变化的地方这种创建表单的方式就显得力不从心了，这个时候，我们不妨直接操作表单模型对象，以配置的方式生成表单，这样会灵活的的多。同时，我们也必须使用完全不同的 Angular 指令和操作表单的方式。不仅如此，在使用模板表单的时候我们用的是 FormsModule, 而在使用模型表单的时候提供支持的是 ReactiveFormsModule 这个模型

1.2.1 概述

表单的控制逻辑写在组件类中，对验证逻辑拥有更多的控制权，适合复杂的表单的类型。

在模型驱动表单中，表单字段需要是 FormControl 类的实例，实例对象可以验证表单字段中的值，值是否被修改过等等。

<img src="./images/6.jpg" alt="转存失败，建议直接上传图片文件">

一组表单字段构成整个表单，整个表单需要是 FormGroup 类的实例，它可以对表单进行整体验证。

<img src="./images/7.jpg" alt="转存失败，建议直接上传图片文件">

使用模型表单有三大要点，分别是：FormControl FormGroup FormArray

  1. FormControl：表单组中的一个表单项。
  2. FormGroup：表单组，表单至少是一个 FormGroup。
  3. FormArray：用于复杂表单，可以动态添加表单项或表单组，在表单验证时，FormArray 中有一项没通过，整体没通过。

1.2.2 快速上手

使用模型创建表单刚好和模板的过程是相反的，使用模型创建表单的过程是从配置项到表单结构的过程。所以从代码上来看就是从 class 到 html 的过程。这个过程给了开发者极大的操作表单的自由度！

  1. 引入 ReactiveFormsModule

    javascript 复制代码 
    import { ReactiveFormsModule } from "@angular/forms"

@NgModule({
  imports: [ReactiveFormsModule]
})
export class AppModule {}

  2. 在组件类中创建 FormGroup 表单控制对象

    javascript 复制代码 
    import { FormControl, FormGroup } from "@angular/forms"

export class AppComponent {
  contactForm: FormGroup = new FormGroup({
    name: new FormControl(),
    phone: new FormControl()
  })
}

  3. 关联组件模板中的表单

    html 复制代码 
    <form [formGroup]="contactForm" (submit)="onSubmit()">
  <input type="text" formControlName="name" />
  <input type="text" formControlName="phone" />
  <button type="submit">提交</button>
</form>

  4. 获取表单值

    javascript 复制代码 
    export class AppComponent {
  onSubmit() {
    console.log(this.contactForm.value)
  }
}

  5. 设置表单默认值

    javascript 复制代码 
    contactForm: FormGroup = new FormGroup({
  name: new FormControl("默认值"),
  phone: new FormControl(15888888888)
})

  6. 表单分组

    javascript 复制代码 
    contactForm: FormGroup = new FormGroup({
  fullName: new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl()
  }),
  phone: new FormControl()
})
    html 复制代码 
    <form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formGroupName="fullName">
    <input type="text" formControlName="firstName" />
    <input type="text" formControlName="lastName" />
  </div>
  <input type="text" formControlName="phone" />
  <button>提交</button>
</form>
    javascript 复制代码 
    onSubmit() {
  console.log(this.contactForm.value.name.username)
  console.log(this.contactForm.get(["name", "username"])?.value)
}

如果使用的是模型表单，那么实现之前的模板表单功能的代码如下所示：

html 复制代码 
  <form [formGroup]="concatForm" (submit)="onSubmit()">
    <div formGroupName="usernameG">
      <input
        type="text"
        formControlName="username"
        required
        pattern="\d+"
      />
      <div
        *ngIf="username && username.touched && !username.valid && username.errors"
      >
        <span *ngIf="username.errors['required']"> 请输入用户名 </span>
        <span *ngIf="username.errors['pattern']"> 用户名不合法 </span>
      </div>
    </div>
    <div formGroupName="passwordG">
      <input formControlName="password" type="password" />
    </div>
    <button type="submit" [disabled]="concatForm.invalid">提交</button>
  </form>
ts 复制代码 
  usernameControl: FormControl = new FormControl();
  concatForm: FormGroup = new FormGroup({
    usernameG: new FormGroup({
      username: this.usernameControl
    }),
    passwordG: new FormGroup({
      password: new FormControl('123456'),
    })
  });

  get username() {
    return this.concatForm.get('username');
  }

  onSubmit() {
    console.log('Form: ', this.concatForm)
    console.log('Value: ', this.concatForm.value)
  }

注意这里我们使用的不再是 ref 或者 ngModel, 取而代之的是 [formGroup]="concatForm" formGroupName="usernameG" formControlName="username" 这些新的指令。同时还需要注意的是 html 中用到的 username 不再是与 input 绑定的 ref, 而是 class 中提供的 getter 方法：

ts 复制代码 
  get username() {
    return this.concatForm.get('username');
  }

整个表单模型对应的是一个 FormGroup 实例对象；而每一个表单元素对应的是一个 FormControl 对象；并且 FormGroup 是可以相互嵌套的，FormGroup 作为 FormControl 的组织结构，而 FormControl 作为每个表单元素的引用。因此，上述 getter 还可以写成如下形式：

ts 复制代码 
  get username() {
    return this.usernameControl;
    // return this.concatForm.get('username');
  }

如何获取 FormGroup 所包裹的所有的 FormControl 呢？假设 group 是某个 FormGroup 的 ref，那么通过 group.controls 就可以得到此 group 管理下的所有的 controls.

1.2.3 内置表单验证器

使用模型表单，不仅可以方便的设置默认值，还可以方便的指定数据校验规则。而在模板表单中，我们需要使用大量的浏览器内置校验规则，这严重限制了校验时候的灵活性。

  1. 使用内置验证器提供的验证规则验证表单字段

    javascript 复制代码 
    import { FormControl, FormGroup, Validators } from "@angular/forms"

contactForm: FormGroup = new FormGroup({
  name: new FormControl("默认值", [
    Validators.required,
    Validators.minLength(2)
  ])
})

  2. 获取整体表单是否验证通过

    javascript 复制代码 
    onSubmit() {
  console.log(this.contactForm.valid)
}
    html 复制代码 
    <!-- 表单整体未验证通过时禁用表单按钮 -->
<button [disabled]="contactForm.invalid" type="submit">提交</button>

  3. 在组件模板中显示为验证通过时的错误信息

    javascript 复制代码 
    get name() {
  return this.contactForm.get("name")!
}
    html 复制代码 
    <form [formGroup]="contactForm" (submit)="onSubmit()">
  <input type="text" formControlName="name" />
  <div *ngIf="name.touched && name.invalid && name.errors">
    <div *ngIf="name.errors.required">请填写姓名</div>
    <div *ngIf="name.errors.maxlength">
      姓名长度不能大于
      {{ name.errors.maxlength.requiredLength }} 实际填写长度为
      {{ name.errors.maxlength.actualLength }}
    </div>
  </div>
</form>

1.2.4 自定义同步表单验证器

  1. 自定义验证器的类型是 TypeScript 类
  2. 类中包含具体的验证方法，验证方法必须为静态方法
  3. 验证方法有一个参数 control，类型为 AbstractControl。其实就是 FormControl 类的实例对象的类型
  4. 如果验证成功，返回 null
  5. 如果验证失败，返回对象，对象中的属性即为验证标识，值为 true，标识该项验证失败
  6. 验证方法的返回值为 ValidationErrors | null
javascript 复制代码 
import { AbstractControl, ValidationErrors } from "@angular/forms"

export class NameValidators {
  // 字段值中不能包含空格
  static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
    // 验证未通过
    if (/\s/.test(control.value)) return { cannotContainSpace: true }
    // 验证通过
    return null
  }
}
javascript 复制代码 
import { NameValidators } from "./Name.validators"

contactForm: FormGroup = new FormGroup({
  name: new FormControl("", [
    Validators.required,
    NameValidators.cannotContainSpace
  ])
})
html 复制代码 
<div *ngIf="name.touched && name.invalid && name.errors">
	<div *ngIf="name.errors.cannotContainSpace">姓名中不能包含空格</div>
</div>

这样一来，可以继续简化代码，实现和模板一样的功能的代码就继续可以简化成如下所示的模样：

ts 复制代码 
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Form, FormControl, FormGroup, FormsModule, NgForm, ReactiveFormsModule, Validators } from "@angular/forms"
import { CommonModule } from '@angular/common';

import { AbstractControl, ValidationErrors } from "@angular/forms"

export class CustomValidators {
  // 字段值中不能包含空格
  static number(control: AbstractControl): ValidationErrors | null {
    // 验证未通过
    if (control.value && !/^\d+$/.test(control.value)) return { number: true }
    // 验证通过
    return null
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'myForm';
  usernameControl: FormControl = new FormControl('', [
    Validators.required,
    CustomValidators.number,
  ]);
  concatForm: FormGroup = new FormGroup({
    usernameG: new FormGroup({
      username: this.usernameControl
    }),
    passwordG: new FormGroup({
      password: new FormControl('123456'),
    })
  });

  get username() {
    return this.usernameControl;
    // return this.concatForm.get('username');
  }

  onSubmit() {
    console.log('Form: ', this.concatForm)
    console.log('Value: ', this.concatForm.value)
  }
}
html 复制代码 
  <form [formGroup]="concatForm" (submit)="onSubmit()">
    <div formGroupName="usernameG">
      <input type="text" formControlName="username" />
      <div
        *ngIf="username && username.touched && !username.valid && username.errors"
      >
        <span *ngIf="username.errors['required']"> 请输入用户名 </span>
        <span *ngIf="username.errors['number']"> 用户名不合法 </span>
      </div>
    </div>
    <div formGroupName="passwordG">
      <input formControlName="password" type="password" />
    </div>
    <button type="submit" [disabled]="concatForm.invalid">提交</button>
  </form>

我们可以从 username.errors 这个对象中读取很多其他信息，比如自定义的表单验证项提供的错误信息等，通过 *.errors 可以将表单做的更加的用户友好。

1.2.5 自定义异步表单验证器

javascript 复制代码 
import { AbstractControl, ValidationErrors } from "@angular/forms"
import { Observable } from "rxjs"

export class NameValidators {
  static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {
    return new Promise(resolve => {
      if (control.value == "admin") {
         resolve({ shouldBeUnique: true })
       } else {
         resolve(null)
       }
    })
  }
}
javascript 复制代码 
contactForm: FormGroup = new FormGroup({
    name: new FormControl(
      "",
      [
        Validators.required
      ],
      NameValidators.shouldBeUnique
    )
  })
html 复制代码 
<div *ngIf="name.touched && name.invalid && name.errors">
  <div *ngIf="name.errors.shouldBeUnique">用户名重复</div>
</div>
<div *ngIf="name.pending">正在检测姓名是否重复</div>

使用异步表单数据验证器可以实现防重复在内的一系列有用的表单验证功能，结合自定义 Validator 返回值的 message 字段，可以对验证失败信息进行更加简洁的展示：

ts 复制代码 
  get errorMsg() {
    if (!this.username?.errors) return '';
    return this.username.errors["message"] ?? "请输入用户名"
  }
html 复制代码 
<div *ngIf="errorMsg">{{ errorMsg }}</div>

1.2.6 FormArray

FormArray 是使用模型表单动态性的良好体现。使用 FormArray 我们可以实现模板表单不具备的动态添加表单项的高级功能，用在复杂交互场景下，提供更好的用户体验。

需求：在页面中默认显示一组联系方式，通过点击按钮可以添加更多联系方式组。

javascript 复制代码 
import { Component, OnInit } from "@angular/core"
import { FormArray, FormControl, FormGroup } from "@angular/forms"
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: []
})
export class AppComponent implements OnInit {
  // 表单
  contactForm: FormGroup = new FormGroup({
    contacts: new FormArray([])
  })

  get contacts() {
    return this.contactForm.get("contacts") as FormArray
  }

  // 添加联系方式
  addContact() {
    // 联系方式
    const myContact: FormGroup = new FormGroup({
      name: new FormControl(),
      address: new FormControl(),
      phone: new FormControl()
    })
    // 向联系方式数组中添加联系方式
    this.contacts.push(myContact)
  }

  // 删除联系方式
  removeContact(i: number) {
    this.contacts.removeAt(i)
  }

  ngOnInit() {
    // 添加默认的联系方式
    this.addContact()
  }

  onSubmit() {
    console.log(this.contactForm.value)
  }
}
html 复制代码 
<form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formArrayName="contacts">
    <div
      *ngFor="let contact of contacts.controls; let i = index"
      [formGroupName]="i"
    >
      <input type="text" formControlName="name" />
      <input type="text" formControlName="address" />
      <input type="text" formControlName="phone" />
      <button (click)="removeContact(i)">删除联系方式</button>
    </div>
  </div>
  <button (click)="addContact()">添加联系方式</button>
  <button>提交</button>
</form>

从上面的代码不难看出来，FormArray 可能是比 FormGroup 更加高级别的元素组织结构，但它一定比 FormControl 更加高级。FormArray 对应的 html 结构的接头指令是 formArrayName。

给之前的模板表单加上动态效果如下代码所示：

ts 复制代码 
  bestFriends: any = new FormArray([]);
  concatForm: FormGroup = new FormGroup({
    usernameG: new FormGroup({
      username: this.usernameControl
    }),
    passwordG: new FormGroup({
      password: new FormControl('123456'),
    }),
    friends: new FormGroup({
      bestFriends: this.bestFriends,
    })
  });
  
  addBestFriends(): void {
    this.bestFriends.push(new FormGroup({
      name: new FormControl(),
      sex: new FormControl(),
      address: new FormControl(),
    }))
  }
  
  ngOnInit(): void {
    this.addBestFriends();
  }
html 复制代码 
<div formGroupName="friends">
  <div formArrayName="bestFriends">
    <div
      *ngFor="let item of bestFriends.controls; let i = index"
      [formGroupName]="i"
    >
      <input formControlName="name" type="text" />
      <input formControlName="sex" type="text" />
      <input formControlName="address" type="text" />
    </div>
  </div>
</div>
<button type="button" (click)="addBestFriends()">增加新的朋友</button>

从上面的代码中不难看出来， FormArray 中的元素由 FormGroup 包裹在外面，并且渲染的时候使用到了 *ngFor 指令，并从中拿到了序列号作为外层 FormGroup 的绑定值，这一点非常重要。

1.2.7 FormBuilder

创建表单的快捷方式。

  1. this.fb.control：表单项
  2. this.fb.group：表单组，表单至少是一个 FormGroup
  3. this.fb.array：用于复杂表单，可以动态添加表单项或表单组，在表单验证时，FormArray 中有一项没通过，整体没通过。
javascript 复制代码 
import { FormBuilder, FormGroup, Validators } from "@angular/forms"

export class AppComponent {
  contactForm: FormGroup
  constructor(private fb: FormBuilder) {
    this.contactForm = this.fb.group({
      fullName: this.fb.group({
        firstName: ["😝", [Validators.required]],
        lastName: [""]
      }),
      phone: []
    })
  }
}

现在使用 FormBuilder 服务重写刚才的所有代码：

ts 复制代码 
  // usernameControl: FormControl = new FormControl('', [
  //   Validators.required,
  //   CustomValidators.number,
  // ], CustomValidators.nameUnique);
  // bestFriends: any = new FormArray([]);
  // concatForm: FormGroup = new FormGroup({
  //   usernameG: new FormGroup({
  //     username: this.usernameControl
  //   }),
  //   passwordG: new FormGroup({
  //     password: new FormControl('123456'),
  //   }),
  //   friends: new FormGroup({
  //     bestFriends: this.bestFriends,
  //   })
  // });

  usernameControl: any;
  bestFriends = [] as unknown as any;
  concatForm = null as any;
  constructor(private fb: FormBuilder) {
    this.usernameControl = this.fb.control('', [
      Validators.required,
      CustomValidators.number,
    ], CustomValidators.nameUnique);

    this.bestFriends = this.fb.array([]);
    this.concatForm = this.fb.group({
      usernameG: this.fb.group({
        username: this.username,
      }),
      passwordG: this.fb.group({
        password: this.fb.control('123456'),
      }),
      friends: this.fb.group({
        bestFriends: this.bestFriends,
      })
    });
  }

其实就是用服务上面的方法简单的替换一下，这样更加符合依赖注入的原理。

1.2.8 练习

  1. 获取一组复选框中选中的值

    html 复制代码 
    <form [formGroup]="form" (submit)="onSubmit()">
  <label *ngFor="let item of Data">
    <input type="checkbox" [value]="item.value" (change)="onChange($event)" />
    {{ item.name }}
  </label>
  <button>提交</button>
</form>
    javascript 复制代码 
    import { Component } from "@angular/core"
import { FormArray, FormBuilder, FormGroup } from "@angular/forms"
interface Data {
  name: string
  value: string
}
@Component({
  selector: "app-checkbox",
  templateUrl: "./checkbox.component.html",
  styles: []
})
export class CheckboxComponent {
  Data: Array<Data> = [
    { name: "Pear", value: "pear" },
    { name: "Plum", value: "plum" },
    { name: "Kiwi", value: "kiwi" },
    { name: "Apple", value: "apple" },
    { name: "Lime", value: "lime" }
  ]
  form: FormGroup

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      checkArray: this.fb.array([])
    })
  }

  onChange(event: Event) {
    const target = event.target as HTMLInputElement
    const checked = target.checked
    const value = target.value
    const checkArray = this.form.get("checkArray") as FormArray

    if (checked) {
      checkArray.push(this.fb.control(value))
    } else {
      const index = checkArray.controls.findIndex(
        control => control.value === value
      )
      checkArray.removeAt(index)
    }
  }

  onSubmit() {
    console.log(this.form.value)
  }
}

  2. 获取单选框中选中的值

    javascript 复制代码 
    export class AppComponent {
  form: FormGroup

  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({ gender: "" })
  }

  onSubmit() {
    console.log(this.form.value)
  }
}
    html 复制代码 
    <form [formGroup]="form" (submit)="onSubmit()">
  <input type="radio" value="male" formControlName="gender" /> Male
  <input type="radio" value="female" formControlName="gender" /> Female
  <button type="submit">Submit</button>
</form>

1.2.9 其他

  1. patchValue：设置表单控件的值（可以设置全部，也可以设置其中某一个，其他不受影响）
  2. setValue：设置表单控件的值 (设置全部，不能排除任何一个)
  3. valueChanges：当表单控件的值发生变化时被触发的事件
  4. reset：表单内容置空

1. 使用patchValue设置表单控件的值

patchValue方法允许你设置表单中的一个或多个控件的值，而不会影响其他控件。

typescript 复制代码 
// 假设你有一个FormGroup
this.form = new FormGroup({
  'firstName': new FormControl(),
  'lastName': new FormControl()
});

// 使用patchValue设置firstName控件的值
this.form.patchValue({
  firstName: 'John'
});

// 使用patchValue同时设置firstName和lastName控件的值
this.form.patchValue({
  firstName: 'John',
  lastName: 'Doe'
});

2. 使用setValue设置表单控件的值

setValue方法用于设置整个表单的值，不能单独排除任何一个控件。

typescript 复制代码 
// 假设form是上面定义的FormGroup
this.form.setValue({
  firstName: 'Jane',
  lastName: 'Smith'
});

3. 使用valueChanges监听表单控件值的变化

valueChanges是一个Observable，它会在表单控件的值发生变化时发出新的值。

typescript 复制代码 
// 监听firstName控件的值变化
this.form.get('firstName').valueChanges.subscribe(value => {
  console.log('First Name changed to:', value);
});

// 监听整个表单的值变化
this.form.valueChanges.subscribe(value => {
  console.log('Form values changed to:', value);
});

4. 使用reset方法置空表单内容

reset方法可以将表单控件的值重置为空，或者你可以提供一个值对象来重置表单到特定的值。

typescript 复制代码 
// 重置整个表单，清空所有控件的值
this.form.reset();

// 或者提供特定的值来重置表单
this.form.reset({
  firstName: 'Default Name',
  lastName: 'Default Surname'
});

组件模板示例

假设你有一个组件模板，其中包含两个输入控件和一个按钮来重置表单：

html 复制代码 
<form [formGroup]="form">
  <input formControlName="firstName" placeholder="First Name">
  <input formControlName="lastName" placeholder="Last Name">
  <button type="button" (click)="resetForm()">Reset Form</button>
</form>

组件类中的处理

在组件类中，你将定义FormGroup，并添加事件处理器来处理表单的值变化和重置操作。

typescript 复制代码 
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-form-component',
  templateUrl: './form-component.html'
})
export class FormComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      'firstName': new FormControl(''),
      'lastName': new FormControl('')
    });

    // 监听firstName控件的值变化
    this.form.get('firstName').valueChanges.subscribe(newValue => {
      console.log('First Name value:', newValue);
    });
  }

  resetForm() {
    this.form.reset();
  }
}

在这个例子中，我们创建了一个包含firstName和lastName的表单，并展示了如何使用patchValue、setValue、valueChanges和reset方法。这些方法提供了对响应式表单控件的灵活操作。

相关推荐
ruky364 天前
Angular 指令
前端·javascript·angular.js
zhang98800007 天前
全面分析一下前端框架Angular的来龙去脉，分析angular的技术要点和难点，以及详细的语法和使用规则，底层原理-小白进阶之路
前端·前端框架·angular.js
zwjapple9 天前
查看Angular CLI的可使用版本并同时安装指定版本。
前端·javascript·angular.js
界面开发小八哥12 天前
界面组件Kendo UI for Angular 2024 Q2亮点 - 让应用程序界面拥有AI提示
ui·界面控件·kendo ui·angular.js·ui开发
天涯学馆12 天前
Angular Pipes：数据变换与格式化
前端·javascript·angular.js
kingbal13 天前
主流框架选择：React、Angular、Vue的详细比较
vue.js·react.js·angular.js·前端框架选择
垂慕容13 天前
Angular 中两种父子组件的组织方式
angular.js
垂慕容18 天前
Angular Http 相关知识
angular.js
垂慕容20 天前
Angular 服务
angular.js
界面开发小八哥21 天前
「实战应用」如何用图表控件LightningChart JS创建SQL仪表板应用（二）
javascript·angular.js·lightningchart·图表开发·图表工具
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）03【经验分享】Ubuntu22.04安装微信(linux官方版)04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）052025张宇考研数学，百度网盘视频课+36讲PDF讲义+真题06【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解07升级 Ubuntu 主机上的 OpenSSH 从 8.9p1 到 9.8p108通达信神奇九转指标原理及选股公式，无未来函数，数字不消失09浏览器插件——ModHeader 的分享和学习10【漏洞复现】Geoserver远程代码执行漏洞（CVE-2024-36401）