Angular 5如何仅重置表单的特定字段？

当然可以！完全不用重置整个表单来实现部分元素的清空或重置——看你的代码应该是用的Angular的FormGroup，我给你几种实用的方案：

方案1：单独重置指定控件 #

如果只需要重置少数几个表单控件，直接通过表单实例获取对应控件，调用它的reset()方法即可。这个方法会把控件的值恢复到初始状态（如果没设置初始值则变为null），同时将控件标记为pristine（未修改）和untouched（未触碰），和全表单重置的单控件效果一致。

示例代码：

onSubmit() {
  if (this.myform.valid) {
    console.log("Form Submitted!");
    // 重置username和email控件
    this.myform.get('username')?.reset();
    this.myform.get('email')?.reset();
    
    // 如果你想重置到指定值而非初始值，可以传入参数
    // this.myform.get('status')?.reset('pending');
  }
}

方案2：批量重置多个控件 #

如果需要重置的控件数量较多，可以把控件名存入数组，通过循环批量处理，这样代码更简洁：

onSubmit() {
  if (this.myform.valid) {
    console.log("Form Submitted!");
    // 定义需要重置的控件名数组
    const controlsToReset = ['username', 'email', 'address', 'zipCode'];
    
    controlsToReset.forEach(controlName => {
      // 为每个控件执行重置操作
      this.myform.get(controlName)?.reset();
    });
  }
}

方案3：模板驱动表单的部分重置（如果用的是模板驱动） #

如果你用的是Angular模板驱动表单而非响应式表单，可以通过@ViewChild获取特定的表单控件实例，再调用重置方法：

import { ViewChild, NgModel } from '@angular/forms';

// ...组件类内容
@ViewChild('usernameInput') usernameInput: NgModel;

onSubmit() {
  if (this.myform.valid) {
    console.log("Form Submitted!");
    // 重置指定的模板驱动表单控件
    this.usernameInput.control.reset();
  }
}

小提示 #

• 调用reset()时如果不传参数，控件会回到初始值（你在FormControl初始化时设置的值，比如new FormControl('默认名')就会回到'默认名'，没设置的话是null）；
• 如果需要清空控件而非回到初始值，也可以用patchValue(null)，但这样不会修改控件的状态（比如还是dirty），根据你的需求选择即可。

内容的提问来源于stack exchange，提问作者Atul Stha