重置Angular响应式表单后，选项选择并没有更新

Question

我使用materialize-css创建了一个Angular表单。这是HTML代码。

<form [formGroup]="addFeedForm" (ngSubmit)="addFeed(addFeedForm.value)" class="col s12">
    <div class="row">
        <div class="input-field col m6 s12">
            <select formControlName="departmentId" #feedDepartment>
                <option value=0>General</option>
                <option [value]="department.id" *ngFor="let department of departmentList">{{department.name}}</option>
            </select>
            <label>Department</label>
        </div>

        <div>
            <button type="button" class="btn waves-effect waves-light col s3 offset-s5" (click)="resetAddFeedForm()">Reset</button>

            <button type="submit" [disabled]="!addFeedForm.valid" class="btn waves-effect waves-light col s3 offset-s1">Add</button>

        </div>
    </div>
</form>

这就是我创建 Angular 表单的方式

this.addFeedForm = new FormGroup({
      departmentId: new FormControl(0,Validators.compose([Validators.required])),
});

当我提交时，我会这样做

addFeed(data: any): void {
    console.log(data);

    this.addFeedForm.reset({    departmentId: 0    });
}

如果我更改了部门选择选项并提交，然后通过将departmentId设置为0来重置表单，则应在选择选项中选择“General”。

它在控制台上设置departmentId为0，但UI上没有更新。

UI行为如下

在UI上选择的选项不同，但在控制台上departmentId为0。

更新：这是stackblitz链接

https://stackblitz.com/edit/angular-tchftw

- Sunil Garg

---

如果现有的答案不能解决您的问题，请提供一个最小的StackBlitz示例来展示您的问题。您在问题中发布的代码似乎可以正确地重置用户界面: https://stackblitz.com/edit/angular-4degxv - frido

这与materialize-css的工作方式有关。例如，请查看https://dev59.com/510a5IYBdhLWcg3wboIv。双向数据绑定似乎不起作用，你需要手动完成很多工作。如果您的整个UI都是使用Materialize构建的，则使用Angular Materialize包装器[ngx-materialize]可能更容易。 - frido

Answer 1

我也遇到了与上述相同的问题，所以我希望分享我的解决方法

模板

<select formControlName="departmentId" #feedDepartment>
    <option selected [ngValue]=null disabled >General</option>
    <option [value]="department.id" *ngFor="let department of departmentList">{{department.name}}</option>
 </select>

类型脚本

this.addFeedForm = this.fb.group({
  departmentId: [null,Validators.required]
})

onResetForm(){
this.addFeedForm.reset();
}

在响应式表单中：我使用null初始化了departmentId formControlName，所以我相应地在模板中更改了我的第一个选择选项。因此，我得到了预期的行为。

- Rahul.S

Answer 2

更新你的表单控件，使用：

 addFeed(data: any): void {
     console.log(data);
     this.addFeedForm.patchValue({departmentId: '0'});
 }

或者你也可以使用

。

this.addFeedForm.controls['departmentId'].setValue('0');

- Sneha Pawar

---

两个解决方案都不起作用 :(。UI选择相同也没有更新，但departmentId的值设置为0。 - Sunil Garg

当您设置departmentId的值时，请将该值设置为字符串，因为您正在将字符串值分配给departmentId。 - Sneha Pawar

相同的不工作变量正在更新，但在选择选项上没有反映...请检查我在问题中添加的图像。 - Sunil Garg

将您的选项设置为<option value="0">“通用”</option>，然后尝试。 - Sneha Pawar

@SunilGarg，使用以下代码：this.addFeedForm.get('departmentId').reset(); 尝试这个链接 https://stackblitz.com/edit/patch-with-form - Sneha Pawar

这更像是一个 materialize-css 的问题。在所问的 stackblitz 链接中提供了相关内容。 - Sunil Garg

Answer 3

尝试这种方式。

addFeed(data: any): void {     
   this.addFeedForm.patchValue({departmentId: [0]});
}

PatchValue 在 Angular 中总是能够重新设置值。对我来说，它总是有效的。

- Sachin Shah

---

相同的不工作变量正在更新，但在选择选项上没有反映。 - Sunil Garg

这更多是关于Materialize-css的问题.. 在相关的Stackblitz链接中提供了解答。 - Sunil Garg

Answer 4

在按钮上放置重置类型即可生效：<button type="reset" class="btn waves-effect waves-light col s3 offset-s5" (click)="resetAddFeedForm()">Reset</button> 工作示例：stackblitz live example

- Vaibhav Patil

---

已更新问题：https://stackblitz.com/edit/angular-tchftw - Sunil Garg

嘿，你需要在resetAddFeedForm()方法中将按钮类型设置为重置(reset)，这样它就能正常工作了。 - Vaibhav Patil