Angular响应式自定义表单重置按钮失效问题求助

问题描述 #

使用Angular响应式自定义表单时，表单的重置按钮无法重置所有字段。其中一个下拉选择框的数据来自子组件，另一个来自父组件，尝试多种重置方法均无效。

相关代码示例 #

父组件TS #

@Component({
  selector: 'parent',
  templateUrl: 'parent.component.html',
  styleUrls: ['parent.component.css'],
})
export class ParentComponent {

}

父组件HTML #

<child-component ></child-component>

注：原代码中标签闭合拼写错误</chield-component>已修正为</child-component>

子组件TS #

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
 
  form: FormGroup;
 
  constructor(private fb: FormBuilder) {
  }
 
  countries = [
    { id: 1, name: "United States" },
    { id: 2, name: "Australia" },
    { id: 3, name: "Canada" },
    { id: 4, name: "Brazil" },
    { id: 5, name: "England" }
  ];
 
  ngOnInit() {
    this.form = this.fb.group({      
      country : [''],
      town : ['']
    });
  }

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

注：原代码中submit()方法位置错误，已修正为放在ngOnInit()方法外部

子组件HTML #

<form [formGroup]="form" (ngSubmit)="submit()">
 
  <!-- 数据来自子组件的选择框 -->
  <select formControlName="country">
    <option *ngFor="let country of countries" [ngValue]="country.id">{{country.name}}</option>
  </select>

  <!-- 数据来自父组件的选择框 -->
  <select formControlName="town">
    <option *ngFor="let town of towns" [ngValue]="town.id">{{town.name}}</option>
  </select>

  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
 
</form>

解决方案 #

1. 替换原生reset按钮为自定义重置方法 #

Angular响应式表单中，原生type="reset"按钮仅重置DOM元素，不会同步更新FormGroup的状态和值，需手动实现重置逻辑：

• 在子组件TS中添加重置方法：

resetForm() {
  // 重置表单到初始状态，可指定重置后的默认值
  this.form.reset({
    country: '',
    town: ''
  });
}

• 修改子组件HTML中的重置按钮，绑定自定义方法：

<button type="button" (click)="resetForm()">Reset</button>

设置type="button"避免触发原生重置行为

2. 修复父组件到子组件的数据传递问题 #

原代码中父组件未传递towns数据，子组件towns变量未定义，导致第二个下拉框渲染异常，进而影响重置功能：

• 父组件TS添加towns数据：

@Component({
  selector: 'parent',
  templateUrl: 'parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  towns = [
    { id: 1, name: "New York" },
    { id: 2, name: "Los Angeles" },
    { id: 3, name: "Sydney" }
    // 按需添加更多城市数据
  ];
}

• 父组件HTML传递towns数据给子组件：

<child-component [towns]="towns"></child-component>

• 子组件TS通过@Input()接收数据：

import { Input } from '@angular/core';

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() towns: any[] = [];
  // ... 其余代码不变
}

3. 添加默认空选项优化用户体验 #

为下拉框添加默认空选项，重置后可回到未选择状态：

<select formControlName="country">
  <option value="" disabled selected>请选择国家</option>
  <option *ngFor="let country of countries" [ngValue]="country.id">{{country.name}}</option>
</select>

<select formControlName="town">
  <option value="" disabled selected>请选择城市</option>
  <option *ngFor="let town of towns" [ngValue]="town.id">{{town.name}}</option>
</select>

内容的提问来源于stack exchange，提问作者Brahim Kante