按后退按钮后角度反应形式无效

Question

我的 Angular Reactive Form 运行良好，除非我填写了所有必填字段并按下 Chrome 的后退按钮（无论是否提交）并再次返回表单页面。我的表格仍然填写完毕，但我无法再次提交表格。我猜是因为表单验证无效，我必须重新填写每个字段才能再次按下提交按钮。

如何强制重新验证表单，这样我就不必删除并再次输入所有内容？

  profileForm = this.fb.group({
    checkbox: [false],
    checkbox_cgv: [false, Validators.requiredTrue],
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    email:['', [Validators.required, Validators.email]],
    phoneNumber:['', Validators.required],
    billing: this.fb.group({
      address1: ['', Validators.required],
      address2: [''],
      city: ['', Validators.required],
      zip: ['', Validators.required]
    }),
    shipping: this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      address1: ['', Validators.required],
      address2: [''],
      city: ['', Validators.required],
      zip: ['', Validators.required]
    }),
  });

部分html文件：

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <div class="row">
      <div class="col">
        <p class="form-row form-left">
          <span class="input-wrapper">
            <input type="text" class="form-control" formControlName="firstName" required>
          </span>
        </p>
        <p class="form-row form-right">
          <span class="input-wrapper">
            <input type="text" class="form-control" formControlName="lastName" required>
          </span>
        </p>
...

<button type="submit" class="btn btn-primary order-btn" [disabled]="!profileForm.valid">Order</button>

Answer 1

您可以在

ngOnInit

或

ngAfterViewInit

上重置表单，但请确保此重置在表单初始化之后进行

ngAfterViewInit() {
  //reset form controls
  this.profileForm.reset();

  //reset validators, explicitly
  this.accountForm.setErrors(null)

}

如果重置整个表单不会影响嵌套组/数组，则将它们定位为

this.profileForm.controls['billing'].reset();

Answer 2

我建议尝试使用

profileForm.resetForm()

Answer 3

我创建了一个角度指令来解决问题，如果它是由表单未反映浏览器自动填充设置的值引起的，这就是我的情况的问题。我编写它只是为了支持

FormGroup

，但它可以适应您的用例。

import { Directive, ElementRef, OnInit } from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({
    // eslint-disable-next-line @angular-eslint/directive-selector
    selector: '[formControlName]',
    standalone: true,
})
export class FormAutofillSyncDirective implements OnInit {

    private readonly element: Element;

    constructor(
        private readonly control: NgControl,
        elementRef: ElementRef,
    ) {
        this.element = elementRef.nativeElement;
    }

    ngOnInit(): void {
        setTimeout(() => {
            this.syncValue();
        });
    }

    private syncValue(): void {
        if ((this.element instanceof HTMLInputElement || this.element instanceof HTMLTextAreaElement) && this.element.value != this.control.value) {
            this.element.dispatchEvent(new Event("input"));
        } else if (this.element instanceof HTMLSelectElement && this.element.value != this.control.value) {
            this.element.dispatchEvent(new Event("change"));
        }
    }
}

要使用它，请将其导入包含表单的组件中。

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, FormAutofillSyncDirective],
  templateUrl: './form.component.html',
  styleUrl: './form.component.scss'
})