Angular реактивная форма недействительна после нажатия кнопки назад

Question

Я получил Angular Реактивную форму, работающую хорошо, за исключением случаев, когда я заполняю все необходимые поля и нажимаю кнопку возврата Chrome (после отправки или нет) и go снова на страницу формы. Моя форма все еще заполнена, но я не могу отправить форму снова. Я думаю, это потому, что валидация формы недействительна, мне нужно заново заполнить каждое поле, чтобы снова нажать кнопку отправки.

Как я могу форсировать повторную валидацию формы, чтобы мне не пришлось стереть и снова введите все?

  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

Рекомендую попробовать

profileForm.resetForm()

Answer 2

Вы можете сбросить форму на ngOnInit или ngAfterViewInit, но убедитесь, что этот сброс происходит после инициализации формы

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

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

}

, если сброс всей формы не влияет на вложенные группы / массивы предназначайтесь для них как this.profileForm.controls['billing'].reset();