如何在 Angular 中陷入错误，无法进入下一页

Question

嘿，我是 Angular 的新手，正在尝试正确完成这部分，以便我可以完成我的编码。我正在尝试错误陷阱，它不允许我进入下一页，我希望在提交或进入下一页时验证每个表单所需的选择。

老兵.html

<div class="container">
<h4>Military Veteran</h4>
<form (ngSubmit)="onSubmit(veteranForm)" #veteranForm="ngForm">
    <div class="row">
        <div class="form-group">
            <label for="veteran">Are you a military veteran?</label><br>
            <input type="radio" name="veteran" required  value="Y" #veteran ngModel> Yes&nbsp;&nbsp;
            <br>
            <input type="radio" name="veteran" required  value="N" #veteran ngModel> No&nbsp;&nbsp;
        </div>

        <div> 
            <small>
                Please click on one of the option buttons above before submitting form!
            </small>
        </div>
    </div>
    <pre></pre>
    <footer>
        <button id="exit" class="btn btn-danger" >Exit</button>
        <button type="submit" class="btn btn-primary"  (click)="navigateIfYes(veteran.checked)"> Next </button>
    </footer>
</form>

老手.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { NgModel } from '@angular/forms';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-veteran',
   templateUrl: './veteran.component.html',
   styleUrls: ['./veteran.component.css']
})
export class VeteranComponent {

   constructor(private router: Router) {}

   ngOnInit(): void {}


   navigateIfYes(value: boolean) {
     this.router.navigateByUrl(!!value ? "/veteran-snap" : "/snap");
   }

   onSubmit(form: NgForm){
    console.log(form);
   }

 }

Answer 1

这里有一个快速的方法：

在 Veterinary.ts 文件中：

// add the following class property (needed to show the error message)
errorMessage?: string;

// Update the function
// Now you ave the whole input element instead of just the checked prop
// ng-untouched is a class added by angular that flags the input "untouched". 
// As soon as you touch it, the class disappear. You can check whenever the input has been touched by looking at this class
navigateIfYes(input: HTMLInputElement) {
  if(input.classList.contains('ng-untouched')) {
    this.errorMessage = 'Select one option'
  } else {
    this.errorMessage = undefined
    this.router.navigateByUrl(!!input.checked ? "/veteran-snap" : "/snap");
  }
}

在老兵.html中

<!-- Add this line where you want to show the error message -->
<p *ngIf="errorMessage">{{errorMessage}}</p>

<!-- Update the navigateIfYes funciton by passing vateran instead of veteran.checked -->
<button type="submit" class="btn btn-primary"  (click)="navigateIfYes(veteran)"> Next </button>