如何在 Angular 中有效取消提交表单？

Question

我想确保用户在跳转到其他页面之前提交表单，所以当用户在表单中输入内容时，如果他们没有提交但尝试点击链接转到其他页面，它应该会弹出错误对话框。

但是，我真的不知道如何在 Angular 的 NgForm 中做到这一点.....

下面是我的模板，使用模板驱动

<h2>My Form </h2>
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name"
           required
           [(ngModel)]="model.name" name="name"
           #name="ngModel">
    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
      Name is required
    </div>
  </div>

  <div class="form-group">
    <label for="alterEgo">Alter Ego</label>
    <input type="text" class="form-control" id="alterEgo"
           [(ngModel)]="model.alterEgo" name="alterEgo">
  </div>

  <div class="form-group">
    <label for="power">Hero Power</label>
    <select class="form-control" id="power"
            required
            [(ngModel)]="model.power" name="power"
            #power="ngModel">
      <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
    </select>
    <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
      Power is required
    </div>
  </div>

  <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
  <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
</form>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

我的组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  powers = ['Really Smart', 'Super Flexible',
  'Super Hot', 'Weather Changer'];

model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

submitted = false;

onSubmit() { this.submitted = true; }

newHero() {
this.model = new Hero(42, '', '');
}

get diagnostic() { return JSON.stringify(this.model); }
}

export class Hero {

  constructor(
    public id: number,
    public name: string,
    public power: string,
    public alterEgo?: string
  ) {  }

}

Answer 1

您可以做的是，删除按钮上的 disabled 属性——并在您的组件中处理提交。因此，在您的组件中，如果 form.valid 则路由，如果不是，则执行逻辑以显示弹出窗口。

组件：

onSubmitOfForm(): void {
     if(form.valid){
      this.router.navigate(['/']);
     } else {
      // Show popup
     }
}

或者您可以将验证移动到表单级别而不是组件前：

constructor(private fb: FormBuilder) { 
this.form = this.fb.group({
  rangeStart: [null, Validators.required],
  rangeEnd: [null, Validators.required]
}, { validator: MyAwesomeRangeValidator});   

}

MyAwesomeRangeValidator 可以满足您的任何验证要求。

  const MyAwesomeRangeValidator: ValidatorFn = (fg: FormGroup) => {
  const start = fg.get('rangeStart').value;
  const end = fg.get('rangeEnd').value;
      return start !== null && end !== null && start < end 
        ? null 
        : { range: true };
};

供参考：https://medium.com/@realTomaszKula/angular-cross-field-validation-d94e0d063b61