Question

我使用Material作为表单，在发布数据后，我在ts文件中重置了form.reset()函数的所有输入字段。此功能清除所有输入字段，但随后所有输入字段都变为红色，因为它们都被触摸并清空。

如何在ts文件中使它们不受影响？这是html代码：

<mat-form-field>
    <mat-select [formControl]="environment" placeholder="Environment">
        <mat-option *ngFor="let environment of environments" [value]="environment">
            {{ environment }}
        </mat-option>
    </mat-select>
    <mat-error *ngIf="environment.hasError('required')">
        * Environment is <strong>required</strong>
    </mat-error>
</mat-form-field>

这是ts代码：

this.http
    .post(url, form.value.item, {
        headers: new HttpHeaders().set('Content-Type', 'application/json')
    })
    .subscribe(data => {
            form.reset();
        },
        err => {
            console.log(err);
        }
    );

Answer 1

这是一个众所周知的 issue 。该问题中提出的一种解决方法是使用ngForm指令并使用该指令重置表单：

<form [formGroup]="myFormGroup" (ngSubmit)="save()" #myForm="ngForm">

组件：

@ViewChild('myForm') myForm; 

// ...

.subscribe(data => {
  this.myForm.resetForm();
}

<强> StackBlitz

Answer 2

您可以在close() API上尝试mat-select方法。

您可以使用mat-stepper

引用ViewChild

尝试here的更多方法。希望这有帮助！

Angular 2 Material如何设置字段未触及

2 个答案: