非常基本的 angular2 形式没有得到验证

Question

我有一个非常基本的表单，由一个输入字段和一个按钮组成。我正在尝试使用 angular2 验证器在输入字段中输入除数字以外的任何内容时显示错误消息，并在输入字段无效或为空时禁用提交按钮。出于某种原因，无论输入什么，都会显示错误消息...知道我做错了什么吗？

我的代码：

app.component.html：

<div class="row">
<div class="col-md-4 col-md-push-4">
<form [formGroup]="barcodeForm"  role="form" (ngSubmit)="submitBarcode(barcode)" >
    <div class="form-group">        
        <input type="number" class="form-control" id="barcode" placeholder="Enter Barcode" [formControl]="barcodeForm.controls['barcode']" [(ngModel)]="barcode" name="barcode" #focusInput>
        <div [hidden]="barcode.valid || barcode.pristine" class="alert alert-danger">A barcode can only consist of numbers (0-9)...</div>
    </div>
    <button class="btn btn-submit btn-block" [disabled]="!(barcode.valid) || barcode.pristine">Submit</button>
</form>

</div>
</div>

app.component.ts 的一部分：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { RestService } from "./services/rest.service";
import { ProductModel } from "./models/product.model";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('focusInput') focusInput: ElementRef;
barcode: string;
barcodeForm: FormGroup;
product: ProductModel;

    constructor(fb: FormBuilder, private restService: RestService){
        this.barcodeForm = fb.group({
            'barcode':['', [Validators.required, Validators.pattern("[0-9]+")]]
        });

    }

Answer 1

在angular2中有两种形式：模板驱动和模型驱动。

• 模型驱动正在代码中定义表单的结构并将输入绑定到其控件（通过formControl 和formGroup）。 模板驱动使用ngModel 并在模板上定义验证器。

我可以看到您的大部分代码都是针对模型驱动的，无论如何我认为这更好，但是您的输入仍然有ngModel，您需要它吗？ 除了barcode.valid 之外，我没有看到您在其他任何地方使用它，因为barcode 只是一个字符串。您希望将disabled 属性绑定到barcodeForms.controls['barcode'].valid，然后删除ngModel 的使用。它可能与formControl 冲突，因为它们都为该元素初始化了FormControl 实例。