Сброс формы - PullRequest
Новая
       26

Сброс формы

0 голосов
/ 30 сентября 2019

В 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();
    }
  }
}

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

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

Ответы [ 2 ]

0 голосов
/ 30 сентября 2019
Директива

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

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

Здесь мы также можем использовать *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

0 голосов
/ 30 сентября 2019

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

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