重置表单后,Angular 4反应式表单未清除验证 [英] Angular 4 reactive form is not clearing the validations after resetting the form
本文介绍了重置表单后,Angular 4反应式表单未清除验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的应用程序中将Angular 4.4.6反应形式与Angular Material 2.0.0-beta.12一起使用.这是我的组件,
I am using Angular 4.4.6 reactive form with Angular Material 2.0.0-beta.12 in my application. This is my component,
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-quick-file',
templateUrl: './quick-file.component.html',
styleUrls: ['./quick-file.component.css']
})
export class QuickFileComponent implements OnInit {
quickFileForm: FormGroup;
constructor() { }
ngOnInit() {
this.initQuickFileForm();
}
private initQuickFileForm () {
this.quickFileForm = new FormGroup({
'fileOpenDate': new FormControl(new Date(), Validators.required),
'fileSubjectEn': new FormControl(null, Validators.required),
'categoryId': new FormControl(null, Validators.required),
'subCategoryId': new FormControl(null),
'primaryClientId': new FormControl(null, Validators.required),
'primaryConsultantId': new FormControl(null, Validators.required)
});
}
saveQuickFileForm() {
console.log(this.quickFileForm);
this.quickFileForm.reset();
}
}
这是我的模板,
<div>
<form [formGroup]="quickFileForm" (ngSubmit)="saveQuickFileForm()">
<mat-form-field class="common-form-field">
<input matInput [matDatepicker]="openDatePicker" formControlName="fileOpenDate" placeholder="Choose Date">
<mat-datepicker-toggle matSuffix [for]="openDatePicker"></mat-datepicker-toggle>
<mat-datepicker #openDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field class="common-form-field">
<input type="text" matInput formControlName="fileSubjectEn" placeholder="Subject in English">
</mat-form-field>
<mat-form-field class="common-form-field">
<mat-select formControlName="categoryId" placeholder="Choose category">
<mat-option value="1">opt 1</mat-option>
<mat-option value="2">opt 2</mat-option>
<mat-option value="3">opt 3</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="common-form-field">
<mat-select formControlName="subCategoryId" placeholder="Choose subcategory">
<mat-option value="1">opt 1</mat-option>
<mat-option value="2">opt 2</mat-option>
<mat-option value="3">opt 3</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="common-form-field">
<mat-select formControlName="primaryClientId" placeholder="Choose subcategory">
<mat-option value="1">opt 1</mat-option>
<mat-option value="2">opt 2</mat-option>
<mat-option value="3">opt 3</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="common-form-field">
<mat-select formControlName="primaryConsultantId" placeholder="Choose subcategory">
<mat-option value="1">opt 1</mat-option>
<mat-option value="2">opt 2</mat-option>
<mat-option value="3">opt 3</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
即使我重置了表单,也仍然显示验证错误.我还尝试了以下方法.
Validation errors are showing even after I reset the form. I also tried the following methods.
this.quickFileForm.clearValidators();
this.quickFileForm.markAsPristine();
this.quickFileForm.markAsPristine();
我的代码和可能的解决方案中可能有什么错误?谢谢.
What could be the error in my code and the possible solution? Thank you.
推荐答案
这似乎是已知的 submit时,noreferrer>错误 .在该问题中提出了一些解决方法,我将使用ngForm
指令:
This seems to be a known bug when having a button of type submit
. There are some work-arounds presented in that issue, of which I would use the ngForm
directive:
<form [formGroup]="quickFileForm" (ngSubmit)="saveQuickFileForm()" #f="ngForm">
TS:
@ViewChild('f') myForm;
saveQuickFileForm() {
this.myForm.resetForm();
}
这似乎工作正常! 演示
This seems to work fine! DEMO
这篇关于重置表单后,Angular 4反应式表单未清除验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文