javascript - Angular 2 Material如何设置一个字段不变

标签 javascript angular angular-material2

我将 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);
        }
    );

最佳答案

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

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

组件:

@ViewChild('myForm') myForm; 

// ...

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

StackBlitz

关于javascript - Angular 2 Material如何设置一个字段不变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48439729/

相关文章:

angular-material2 - mdSort 在 Angular Material 2 中未定义

Angular Material - 带有错误状态的自定义响应式(Reactive)表单控件

angular - fromEvent observable 仅在按下 Enter 键时发出值

javascript - 需要 JS : object is not a function (when calling form. submit()) 中的解决方法

javascript - 可以将伪类 (::after) 添加为 HTML 标记的一部分吗?

html - 是否可以使用 Angular2 有条件地显示元素属性?

angular - 在 Linux Web 应用程序上的 Azure 中运行 Angular

javascript - 为原型(prototype)方法创建代理

javascript - 单击按钮一次显示一个列表

html - 在 Angular 组件上添加多个背景并使它们彼此对齐并响应