Question

我正在为我的应用程序使用角度4并在我的反应形式中选择如下：

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

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

Answer 1

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

例如，如果在构造函数中将表单设置为：

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

然后在你＆＃34;重置＆＃34;时将其设置为相同它

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

Answer 2

来自文档：link

您还可以通过传入与表单结构匹配的状态映射，并将控件名称作为键来重置为特定表单状态。

constructor() {
 this.createGroupForm = new FormGroup({
  groupType: new FormControl(0)
 });
}

在重置方法

中再次设置默认值

public resetForm() {
 this.createGroupForm.reset({
  groupType: 0
 });
}

HTML

<select name="groupType" class="form-control" id="group_type" formControlName="groupType">
  <option value="0" selected>Closed Group</option>
  <option value="1">Open Group</option>
</select>

Answer 3

选择安全问题

this.forgotUsernameFrm = new FormGroup({
 secQues: new FormControl(null,[
Validators.required
])
})

 <option value="null" disabled>Select Security Question</option>

角度形式重置正在清除默认选定值

3 个答案: