为什么在empForm.reset()之后;所需字段标记为无效错误

Question

我正在学习Angular Form。这是一个简单的表单，有ename/job/sal字段，需要ename/job。在我提交之前，当我输入值时，验证器工作得很好，clear函数也很好地擦除了填充的文本。但是，在我点击提交(它调用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();
}
}

Answer 1

我认为它是已知的issue，作为一种变通方法，您可以尝试：

HTML:

<form [formGroup]="empForm" #f="ngForm">
...
</form>

TS:

@ViewChild('f') myNgForm;
onSubmit() {
// Service call
this.myNgForm.resetForm();
}

Working_Demo

Answer 2

这里有一个你可以像这个一样做的例子

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指令导出到一个局部变量，并使用它的submit属性来指示表单何时提交，仅此而已！