Как сделать валидную форму в Angular?

Question

Я хочу убедиться, что пользователь отправляет форму, прежде чем перейти на другую страницу, поэтому, когда пользователь вводит что-то в форму, если он не отправил, но пытается кликнуть ссылку, перейти на другую страницу, она должна появиться диалог ошибки.

Однако я не знаю, как это сделать в NgForm в Angular .....

ниже мой шаблон, с использованием шаблона

<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

Что вы можете сделать, это удалить отключенное свойство на кнопке - и обработать отправку в вашем компоненте. Так что в вашем компоненте, если form.valid, затем route, если нет, тогда сделайте логику для отображения всплывающего окна.

Компонент:

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