html - 重置 Angular react 形式不会更新选择选项

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

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

UI 行为就像

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

更新:这是 stackblitz

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');