重置表单并设置默认值Angular 2

Question

我正在开发一个简单的Angular 2应用程序,但我无法重置ngForm但保留默认值:

预期的行为是单击"重置"时,输入框将重置为默认值(在本例中为"默认")以及返回默认值的所有角度特定类(即ng-untouched,ng-pristine,等等)

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

以下代码段:

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 });

原始答案(对于角度@ 2有效)

您可以传递一个值,resetForm该值将用作表单的默认值:

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

(当然,如果您的表单是a FormGroup并且它具有名称id应该具有默认值的控件)