Angular2テンプレートベースフォームの検証が機能しません

Question

現在、角度2のフォームに検証を追加しようとしていますが、何らかの理由で、必須フィールドが入力されていないときに送信ボタンを無効にすることができません。 私のフォームテンプレートのコードを次に示します：

<h1 md-dialog-title>{{title}}</h1> 
<form #formCtrl="ngForm"> 
    <md-dialog-content> 
     <md-input-container> 
      <input #name md-input placeholder="Name" value="" name="name" focused required> 
     </md-input-container> 
     <br /> 
     <md-select #inputtype placeholder="Input type" name="inputtype"> 
      <md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id"> 
      {{inputtype.name}} 
      </md-option> 
     </md-select> 
    </md-dialog-content> 
    <md-dialog-actions> 
     <button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button> 
    </md-dialog-actions> 
</form> 

いくつかの例によると、このボタンは決して無効になりません。私も "！formCtrl.valid"を試してみました。 私は非物質的なデザインの入力フィールドを使用しようとしましたが、これは問題ではないかと考えていますが、それでも動作しません。

私はその後、私のアプリケーションに次の簡単な例を貼り付け/コピーを試みたが、でもそれがすべてでは動作しません。 http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

任意のアイデアを正しく動作することを防ぐかもしれないものへと？

あなたはname属性の値に基づいて、フォームの値を結合する、ngModelを追加する必要があります：あなたは、最終的な2角度よりも新しいリリースを使用していると仮定すると、

Answer 1

。あなたのケースでは、1つはname="inputtype"、もう1つはname="name"です。したがって、値をバインドするにはngModelを追加する必要があり、フォームは必要に応じて機能するはずです。

<form #formCtrl="ngForm" (ngSubmit)="save(formCtrl.value)"> //whatever your submit method is 
    <md-dialog-content> 
     <md-input-container> 
      <input md-input name="name" required ngModel> 
     </md-input-container> 
     <md-select name="inputtype" required ngModel> 
      <md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id"> 
      {{inputtype.name}} 
      </md-option> 
     </md-select> 
    </md-dialog-content> 
    <md-dialog-actions> 
     <button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button> 
    </md-dialog-actions> 
</form> 

は、これが導入されたとき、これは可能changelogsのどこかに見つかるはず覚えていない：:)

だから、次は（コードからのノイズのビットを削除）動作するはずですAngularは常にほぼすべてのリリースで物事を微調整しているので、しばらくの間見ておくと便利です。それでは、変更と構文を更新してくれるでしょう:)