重置表单并设置默认值Angular 2 [重复]

Question

我正在开发一个简单的 Angular 2 应用程序，但在重置 ngForm 但保持默认值时遇到问题：

预期的行为是单击“重置”时，输入框将重置为其默认值（在本例中为“默认”）以及所有角度特定的类恢复为默认值（即 ng-untouched、ng -原始等）

我看到的是默认值也被清除了，即使我在表单重置后明确设置了它

下面的代码sn-p：

HTML：

<form (ngSubmit)="onTrainSearchClick()" novalidate #trainForm="ngForm">
  <input type="text" [(ngModel)]="id" name="someId"/>
  <button type="button" (click)="reset(trainForm)">Reset</button>
  <button type="submit">Search</button>
</form>

TypeScript（省略了导入和@Component）：

export class TrainSearchTestComponent implements OnInit {

  id: string = 'DEFUALT';

  constructor() { }
  ngOnInit() { }
  onTrainSearchClick(){ }

  reset(form: NgForm){
    form.resetForm();
    this.id = 'DEFUALT';
  }
}

Answer 1

使用form.reset:

form.reset({ id: this.id });

---

原始答案（对 angular@2 有效）

您可以将值传递给resetForm，该值将用作表单的默认值：

form.resetForm({ id: this.id });

（当然，如果您的表单是 FormGroup 并且它有一个名为 id 的控件，它应该有一个默认值）