非常に基本的なangle2フォームが検証されない

Question

私は入力フィールドとボタンからなる非常に基本的なフォームを持っています。私は、数字以外のものが入力フィールドに入力されたときにエラーメッセージを表示するために、また入力フィールドが無効であるか空であるときに送信ボタンを無効にするために、angular2バリデーターを使用しようとしています。何らかの理由で、何が入力されたかにかかわらず、エラーメッセージが表示されます...何が間違っているの？

私のコード：

app.component.html：app.component.tsの

<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> 

一部：テンプレートは駆動：フォームの2種類がありますangular2で

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

モデル駆動型です。駆動

• モデルコードにフォームの構造を定義し、（formControlとformGroupを介して）そのコントロールへの入力を結合されています。 テンプレート駆動はngModelを使用し、テンプレートにバリデータを定義しています。

私はあなたのコードのほとんどが私の意見でとにかく優れているモデル駆動を対象としているが、あなたはまだあなたの入力にngModelを持って、あなたが何かのためにそれが必要なのですか見ることができますか？ barcode.valid以外はどこでも使っていますが、barcodeは単なる文字列であるため動作しません。代わりにdisabledプロパティをbarcodeForms.controls['barcode'].validにバインドし、ngModelの使用を削除します。両方ともFormControlインスタンスを初期化するため、formControlと競合する可能性があります。