Question

我使用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来提交并重置表单，则应在选择选项中选择“ 常规”。

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

UI行为就像

在UI上选定的选项不同，但在控制台DepartmentId上为0

更新：这是堆叠闪电战

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

Answer 1

使用

更新您的表单控件

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

或者您也可以使用

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

Answer 2

尝试这种方式

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

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

Answer 3

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

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

重置角反应形式不更新选择选项

4 个答案: