Angular 5.2 - 在保持焦点的同时绕过 [routerLink] 的表单验证

Question

我已经完全改写了这个问题并包含了一个完整的代码示例。

我遇到一个间歇性问题，单击按钮有时会显示验证错误消息，而不是执行 router.nagivate 命令。然后，我必须单击它一秒钟才能工作。正如我所说，这是间歇性的。该解决方案需要包括以下示例的焦点行为，或者另一种方式来关注输入 html 标记。有时，我只需要单击一次。为什么？而且，我怎样才能控制这种行为，使它不是随机的？

我发布了两个测试组件来演示这个问题。任何帮助将不胜感激。

test.component.html

<form novalidate #f="ngForm">
    <h2>Scan Part</h2>
    <input id="partNum" type="number" class="form-control" required [correctPart]="orderShipDetail?.UPC" name="partNum" [(ngModel)]="model.partNum" #partNum="ngModel" #partNumRef  />
    <div *ngIf="partNum.invalid && (partNum.dirty || partNum.touched)" class="text-danger">
        <p *ngIf="partNum.errors.required">PartNum is required.</p>
        <p *ngIf="partNum.errors.correctPart">Please scan the correct part. </p>
    </div>
    <button type="button" (click)="onClickCartonPartButton()">Carton Parts</button>
</form>

test.component.ts

import { Component, OnInit, AfterViewChecked, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';

class TestForm {
    constructor(
        public partNum: string = '') {
    }
}

@Component({
    selector: 'test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit, AfterViewChecked {

    @ViewChild('partNumRef') partNumRef: ElementRef;

    model: TestForm = new TestForm();
    public focusedElement: ElementRef;

    constructor(
        private router: Router,
        private route: ActivatedRoute
    ) { }

    ngAfterViewChecked() {
        this.focusedElement.nativeElement.focus();
    }

    ngOnInit() {
        this.focusedElement = this.partNumRef;
    }

    onClickCartonPartButton() {
        try {
            this.router.navigate(['/test2', 1006, 1248273, 1234]);
        } catch (ex) {
            console.log(ex);
        }
    }
}

test2.component.html

<a [routerLink]="['/test', 1006, 1248273, 1234, 5 ]">click this</a>

test2.component.ts

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

@Component({
  selector: 'test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.scss']
})
export class Test2Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

将这些路由添加到 app.module.ts

{ path: 'test/:empId/:orderNumber/:licensePlate/:orderLine', component: TestComponent },
{ path: 'test2/:empId/:orderNumber/:licensePlate', component: Test2Component },

Answer 1

在两个超链接上设置type="button"，避免提交

未指定类型属性的按钮元素表示相同 事物作为一个按钮元素，其类型属性设置为“提交”。

或者把两个超链接放到表单外面

Answer 2

从验证消息 div 中的 *ngIf 中删除 partNum.touched，像这样...

<div *ngIf="partNum.invalid && partNum.dirty" class="text-danger">
    <p *ngIf="partNum.errors.required">PartNum is required.</p>
    <p *ngIf="partNum.errors.correctPart">Please scan the correct part.</p>
</div>