0

在 AngularJs 中，我曾经使用 ng-submitted 类进行表单验证，但是当您提交表单时它不会出现在 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

4

2 回答 2

0

NgForm指令有一个submitted可以使用的属性。在这种情况下，我认为不需要使用指令。

相反，您可以使用该布尔属性来满足您的需要，无论需要什么。如果你想在你的 stackblitz 示例中设置一些类（比如），你可以使用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

于 2019-09-30T09:16:22.243 回答
-1

你只需要调用它来重置表单

resetForm() {
   this.form.reset();
}
于 2019-09-30T07:14:29.987 回答