.reset（）清除表单但不删除验证

Posted 2021-04-11

我有一个反应形式，我有一个密码字段，并在提交表单时，我想重置表单。从谷歌搜索和阅读文档，它看起来像.reset()应将所有值设置为null并使所有pristine和untouched。然而，当我重置时，我仍然有ng-touched和ng-invalid类。我不确定我哪里出错了？在它最简单的形式我有：

<form [formGroup]="newPassForm" (submit)="submitNewPass()">
    <div class="row">
        <mat-form-field>
            <mat-label>Password:</mat-label>
            <input matInput type="password" formControlName="currentPass">
        </mat-form-field>
        <div *ngIf="invalidPass" class="notice notice-error">Wrong password</div>
    </div>
    <div class="row">
        <button mat-raised-button color="primary">Submit</button>
    </div>
</form>

用我的控制器作为

ngOnInit() {
    this.newPassForm = this.formBuilder.group({
        currentPass: [
            '',
            [Validators.required, Validators.minLength(8)]
        ],
    });
}

submitNewPass() {
    this.newPassForm.reset({ currentPass: '', newPass: '' });
    return;
}

我也尝试删除了材料，但它没有任何效果。

答案

尝试：

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

TS：

@ViewChild('f') myNgForm;

submitNewPass() {
    this.myNgForm.resetForm({ currentPass: '', newPass: '' });
}

DEMO