角2のテンプレートフォームの検証が機能しない

Question

私はAngular 2のテンプレートテンプレート駆動型のサンプルを扱っており、基本的な検証から始めて動作しません。

私が参照しているビデオチュートリアルからsystexを確認しましたが、これはビデオに表示されているものとまったく同じです。

問題はSubmit/OKボタンを押したときに、検証エラーメッセージが表示されないことです。チュートリアルビデオに表示されるエラーメッセージも添付しています。

コード例1：コンポーネントの

HTMLファイル：

<form #form="ngForm" > 

    <input 
     type="text" 
     id="name" 
     required 
     placeholder="Name" 
     name="name" 
     ngModel> 
    <button type="submit">OK</button> 

</form> 

TSファイル：私もフォームコントロールのタグを追加することで試してみました

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

@Component({ 
    selector: 'my-details', 
    templateUrl: './details.component.html', 
    styleUrls: ['./details.component.scss'] 
}) 
export class DetailsComponent implements OnInit { 

    constructor() { 
    // Do stuff 
    } 

    ngOnInit() { 
    console.log('Hello About'); 
    } 

} 

、それまた働かなかった

コード例2：

上記のコンポーネントの修正HTMLファイル：

<form #form="ngForm" > 

    <div class="form-group"> 
    <input 
     type="text" 
     class="form-control" 
     id="name" 
     required 
     placeholder="Name" 
     name="name" 
     ngModel> 
    <button type="submit">OK</button> 
    </div> 

</form> 

Answer 1

私はだけ、ユーザーのの助けを借りて、それを解決： - @yurzuiコメント。

これは問題ではなく、私が使用しているAngular 4の動作です。デフォルトではnovalidateがフォームに追加されています。

IフォームにNOVALIDATEを使用して追加し、私の入力制御に必要なタグを追加ないことによってそれを確認し、最終的に、私は{{form.valid}}を加えました。

有効なのは、入力コントロールに値を入力した場合のみです。私のコントロールには、次のされたことを必要タグが、フォームのデフォルトと目に見えないNOVALIDATEは、デフォルトではすべてのエラーメッセージを表示することを妨げた。証明

<form #form="ngForm" > 

    <div class="form-group"> 
    <label for="firstNameId" class="control-label">First Name</label> 
    <input #firstName="ngModel" type="text" class="form-control" id="firstNameId" required placeholder="Name" name="firstName" [(ngModel)]="model.firstName"> 
    </div> 


    <button class="btn btn-primary" type="submit">OK</button> 

</form> 

{{ form.valid }}