Question

我有以下代码用于演示目的，显示带有错误消息的简单表单行和提交按钮：

<form [ngFormOptions]="{updateOn: 'submit'}">
   <tid-form-row>
      <label tid-ui-label for="temperatureInput">Temperature:</label>
      <input [tid-ui-input]="{required: true}" id="temperatureInput" name="temperatureName" placeholder="20,4"
             [(ngModel)]="temperatureModel" #temperature="ngModel" [tidDigits]="{integer: 2, fraction: 1}" required>
      <ng-template #hint>
         <small tid-ui-hint>The yellow color indicates that this field is required.</small>
      </ng-template>
      <div tid-ui-error *ngIf="temperature.invalid && (temperature.dirty || temperature.touched); else hint">
         <span *ngIf="temperature?.errors.required">Field is required.</span>
         <span *ngIf="temperature?.errors.tidDigits">Must be max 2 integer digits and max 1 fraction digit.</span>
      </div>
   </tid-form-row>
   <tid-button type="submit">Check validation</tid-button>
</form>

其中tidDigits是custom ValidatorDirective ValidatorFactory：

export function digitsValidator(config: any): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const value = control.value;
    const errorObject: any = {tidDigits: {value: control.value}};
    let passed = true;

    if (value) {
      const [integer, fraction] = value.split(',');
      if (config.integer && config.integer >= 0) {
        if (integer.length > config.integer) {
          passed = false;
          errorObject.tidDigits.integer = integer.length;
        }
      }
      if (config && config.fraction && config.fraction >= 0) {
        if (fraction.length > config.fraction) {
          passed = false;
          errorObject.tidDigits.fraction = fraction.length;
        }
      }
    }
    return passed ? null : errorObject;
  };
}

我希望演示在用户点击提交按钮时显示不同的错误消息。这是一个演示表单，我不希望表单完全提交。

当字段为空（required - 验证程序）时，错误消息会在按下提交按钮后正确显示输入20,44（tidDigits - 验证者）。但是，如果输入了有效值（例如20,4），则表单会提交 - 即重新加载页面并将字段名称附加到URL：/tid-form-row?temperatureName=20,4

有没有办法阻止表单提交？

我按照(ngSubmit)="onSubmit()"和onSubmit() { return false; } (ngSubmit)="$event.preventDefault()"尝试了intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(request) .catch((error, source) => { if (error instanceof HttpErrorResponse && error.status == 401 && !error.url.includes("/signin")) { this.router.navigate(["/signin"]); return Observable.empty(); } else { return Observable.throw(error); } }); }，但它没有用。还有其他想法吗？

Answer 1

<button>代码中type属性的默认值为submit，如果您想阻止它，则需要用以下内容覆盖：

<button type="button"></button>

删除type="submit"已经足够了，更多详情请点击此处：HTML button to NOT submit form

如果你想要验证，也许你可以尝试以下方法：

<form #form>
    <button type="button" (click)="validateForm(form)"></button>
</form>

并且，在你的Typescript代码中：

public validateForm(form: NgForm) {
  for (const control in form.controls) {
    control.updateValueAndValidity();
  }
}

Answer 2

尝试删除按钮上的type="submit"。

如果您在(ngOnSubmit)元素上定义了form，则任何submit按钮都会激活该功能。我通常只是在表单中的按钮上使用(click)事件监听器来激活函数。

您是否有理由绕过输入更改的验证？很遗憾，您正在倾听submit。因此，您可能需要稍微回溯并重新设计解决方案。当按钮发生updateValueAndValidity事件时，您可以在表单控件上运行(click)。要使其中大部分工作，您可能需要使用Reactive Form而不是Template Driven Form。

查看AbstractControl

在Angular 5中验证后提交表单

2 个答案: