angular - 为什么在 empForm.reset(); 之后 标记为无效错误的必填字段?
问题描述
我正在学习 Angular 形式。这是一个简单的表格,有 ename/job/sal 字段,ename/job 是必需的。在我提交之前,当我输入值时,验证器工作正常,并且清除功能也很好地擦除了填充的文本。但是,在我单击提交(调用 empForm.reset())后,必填字段标记为红色 - 无效字段错误,清除按钮也无法删除红色,我认为这不是一个合理的行为。我只想在提交后,所有字段都保持原来的状态,没有验证失败的红色标记。如何实现,谢谢。
谢谢和问候,马丁。
<form [formGroup]="empForm" (ngSubmit)="onSubmit()">
<div class="fields-container">
<mat-form-field>
<input formControlName="ename" matInput placeholder=Ename>
<mat-error *ngIf="empForm.controls['ename'].errors?.required">Ename is required.</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="job" matInput placeholder=Job>
<mat-error *ngIf="empForm.controls['job'].errors?.required">Job is required.</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="sal" matInput placeholder=Salary>
</mat-form-field>
</div>
<div class="buttons-container">
<button mat-raised-button type="submit" [disabled]="empForm.invalid">Submit</button>
<button mat-raised-button type="button" (click)="onClear()">Clear</button>
</div>
</form>
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-emp',
templateUrl: './emp.component.html',
styleUrls: ['./emp.component.scss']
})
export class EmpComponent implements OnInit {
empForm;
constructor(private fb: FormBuilder) {
this.empForm = this.fb.group({
ename: ['', Validators.required],
job: ['', Validators.required],
sal: [1000]
})
}
ngOnInit(): void {
}
onSubmit(){
// save to db - TBD
this.empForm.reset();
}
onClear(){
this.empForm.reset();
}
}
解决方案
这是您可以这样做的示例
html
<form [formGroup]="form" novalidate (submit)="submit()" #myform="ngForm">
<input type="text" formControlName="firstName" />
<p *ngIf="form.get('firstName').hasError('required') && myform.submitted">Name is required</p>
<button type="submit">Submit</button>
</form>
零件
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
firstName: ['', Validators.required]
});
}
我们只是将 ngForm 指令导出到一个局部变量,并使用它的提交属性来指示何时提交表单,仅此而已!
推荐阅读
- python - 在 django 项目上安装 extdirect 的问题
- mysql - 带有 MySQL 的 Spring Boot 正在立即关闭
- hive - 为什么 Hive 返回这个结果?
- mvvm - 谁能帮助理解这个 Knockout Observable?
- windows - 如何设置 SetDialogDpiChangeBehavior 的掩码和值参数
- kubernetes - Kubernetes NFS 服务器 pod mount 适用于 pod ip 但不适用于 kubernetes 服务
- javascript - 如何使用 momentjs 或 vanilla JS 将 ISO 日期格式转换为 yyyy-MM-dd 格式?
- r - 当 knitr 中的 results='hold' 时单独输出
- r - 删除“外行”以允许插值(并防止外推)
- wordpress - 为自定义查询 wp 加载更多内容