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类型的按钮时，这似乎是一个已知的 bug 。在该问题中提出了一些解决方法，其中我将使用ngForm指令：

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

TS：

@ViewChild('f') myForm;

saveQuickFileForm() {
  this.myForm.resetForm();
}

这似乎工作正常！的 DEMO

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")});

重置表单后，Angular 4被动表单不会清除验证

3 个答案: