Angular 形式重置正在清除默认选择的值

Question

我在我的应用程序中使用 Angular 4，并在我的 react 表单中进行选择，如下所示:

  <select class="form-control" formControlName="persons">
    <option value="" selected>Select default</option>
     <option *ngFor="let p of persons" [value]="p">{{p}}</option>
   </select>

效果很好，第一次渲染时选择了选择默认选项。但是，当我执行 myForm.reset() 时，表单按预期进入初始状态，但不再选择所选的默认值。如何重置表单并保持选择默认值？

Answer 1

假设您在构造函数中使用默认值初始化表单，只需将其设置回相同的值即可。

例如，如果在构造函数中您将表单设置如下:

constructor() {
    this.heroForm = this.fb.group({
        name: ['Joe', Validators.required ],
    });
}

然后在“重置”时将其设置为相同的值。

public resetForm() {
    this.heroForm = this.fb.group({
        name: ['Joe', Validators.required ],
    });
}