重置角度反应形式不会更新选择选项答案

【问题标题】：resetting angular reactive form is not updating the select option重置角度反应形式不会更新选择选项
【发布时间】：2021-02-28 15:50:41
【问题描述】：

我使用materialize-css 创建了一个角形。这是 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>

这就是我创建角形的方式

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”。

它不是在 UI 上更新，而是在控制台上，它将 departmentId 设置为 0。

UI 行为就像

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

更新：这是堆栈闪电战

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

【问题讨论】：

如果现有答案都不能解决您的问题，请提供一个最小的堆栈闪电战来展示您的问题。您在问题中发布的代码似乎正确重置了 UI：stackblitz.com/edit/angular-4degxv
这与materialize-css 的工作方式有关。例如，结帐stackoverflow.com/q/30341095/9423231。 2 路数据绑定似乎不起作用，您必须手动执行很多操作。如果你的整个 UI 都是用 materialize 制作的，那么使用 Angular Materialize 包装器ngx-materialize 可能会更容易。

标签： html angular angular-reactive-forms

【解决方案1】：

使用

更新您的表单控件

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

或者你也可以使用

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

【讨论】：

这两个解决方案都不起作用:(。UI选择上的相同没有得到更新，但departmentId的值设置为0
当您设置 departmentId 的值以将该值作为字符串时，因为您将字符串值分配给 departmentId
同样不工作的变量正在更新，但没有反映选择选项..检查我添加的图像有问题
选择然后尝试
@SunilGarg this.addFeedForm.get('departmentId').reset();试试这个stackblitz.com/edit/patch-with-form

【解决方案2】：

试试这个方法

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

PatchValue 始终可以重新设置角度值。它总是对我有用。

【讨论】：

相同的无效变量正在更新，但未反映选择选项
这更多的是 materialize-css 问题.. 提供有问题的 stackblitz 链接

【解决方案3】：

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

【讨论】：

stackblitz.com/edit/angular-tchftw .. 也更新了问题
嘿，您需要将按钮类型重置为 resetAddFeedForm() 方法。它会起作用的。

【解决方案4】：

我也遇到了上面说的同样的问题，所以我希望分享我的解决方法

模板

<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，所以我也在模板中相应地更改了我的第一个选择选项。因此我得到了预期的行为

【讨论】：