Angular 4被动表单在重置表单后没有清除验证

Question

我在应用程序中使用Angular 4.4.6反应形式和Angular Material 2.0.0-beta.12。这是我的组件，

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>

即使在我重置表单后，验证错误也会出现。我还尝试了以下方法。

this.quickFileForm.clearValidators();
this.quickFileForm.markAsPristine();
this.quickFileForm.markAsPristine();

我的代码中可能有什么错误以及可能的解决方案？非常感谢。

Answer 1

当按钮类型为submit时，这似乎是一个已知的错误。这个问题中提出了一些解决方案，其中我将使用ngForm指令：

<form [formGroup]="quickFileForm" (ngSubmit)="saveQuickFileForm()" #f="ngForm">

TS:

@ViewChild('f') myForm;
saveQuickFileForm() {
this.myForm.resetForm();
}

这似乎很好用演示

Answer 2

@AJT_82，我们修改了您的一些代码。

<form [formGroup]="quickFileForm" (ngSubmit)="saveQuickFileForm(f)" #f="ngForm">
saveQuickFileForm(form) {
console.log(this.quickFileForm);
form.resetForm();
}

删除了@ViewChild，似乎也有效。。BTW谢谢你的帮助！：)

Answer 3

为了防止视觉效果不佳，我通过jquery：

$("#form .form-control").each((idx, ctrl)=>{$(ctrl).removeClass("is-invalid")});