.reset()清除表单但不删除验证

问题描述 投票:0回答:1

我有一个反应形式,我有一个密码字段,并在提交表单时,我想重置表单。从谷歌搜索和阅读文档,它看起来像.reset()应将所有值设置为null并使所有pristineuntouched。然而,当我重置时,我仍然有ng-touchedng-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;
}

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

angular angular-reactive-forms
1个回答
0
投票

尝试:

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

TS:

@ViewChild('f') myNgForm;

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

DEMO

© www.soinside.com 2019 - 2024. All rights reserved.