Сброс формы

Question

В AngularJs я использовал класс ng-submit для проверки формы, но он не отображается в Angular при отправке формы. Я написал директиву, которая добавляет класс, отправленный в форму, и удаляет его при сбросе

@Directive({
  selector: '[appForm]'
})
export class FormDirective implements OnDestroy {
  private subscription: Subscription;

  constructor(el: ElementRef, form: NgForm) {
    this.subscription = form.ngSubmit.subscribe(() => {
      el.nativeElement.classList.add('submitted');
    });
    form.onReset = () => {
      el.nativeElement.classList.remove('submitted');
    };
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

Это отлично работает, когда вы сбрасываете форму с помощью кнопки сброса. Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно выполнить сброс со значениями, отличными от установки всех привязок на null, мне нужно сбросить форму с помощью метода ngForm resetForm, но это не запускает метод onReset, и я не могу найти способ нажать в форму, которая сбрасывается таким образом.

https://stackblitz.com/edit/angular-u2rlx9

Answer 1

NgForm директива имеет submitted собственность, которую вы можете использовать. Я не вижу необходимости в использовании директивы в этом случае.

Вместо этого вы можете использовать это логическое свойство для своих нужд, для любых нужд. Если вы хотите установить какой-либо класс (например) в своем образце stackblitz, вы можете использовать ngClass для этого это "угловой путь". Вы не должны манипулировать DOM, если это действительно не нужно, и в этом случае это определенно не нужно, поскольку мы можем использовать привязки angular, что рекомендуется.

Здесь мы также можем использовать *ngIf:

<form #form="ngForm">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button" (click)="form.resetForm()">Angular reset</button>
  <div *ngIf="form.submitted">Submitted</div>
  <div *ngIf="!form.submitted">Not submitted</div>
</form>

Ваш форк STACKBLITZ

Answer 2

Вам просто нужно вызвать это, чтобы сбросить форму

resetForm() {
   this.form.reset();
}