ngFormが無効のときにボタンを無効にする

Question

私は、コンテンツがいっぱいになるまでSAVEボタンを無効にする必要があるという追加モーダルがあります。内容は、ボタンを取得する必要満たされたようenabled.Hereは

<div bsModal #editModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
<div class="modal-dialog modal-md"> 
    <div class="modal-content"> 
     <form name='groupForm' #groupForm="ngForm" novalidate> 
      <div class="modal-header"> 
       <h4 class="modal-title wd-title-popup">Add Access Group</h4> 
      </div> 
      <div class="modal-body row"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 accssContent paddingLeftClass"> 
        <md-input-container style='width: 100%;margin-bottom: 6px !important;'> 
         <input type="textbox" mdInput name="admin" [(ngModel)]="group.groupName" placeholder="Access Group Name" required> 
        </md-input-container> 
       </div> 
      </div> 
      <div md-theme="reports" class="modal-footer" style="text-align: center;"> 
       <div layout-align="end center" layout="row"> 
        <button md-raised-button class="md-raised color-white" (click)="editModal.hide()" style="width: 45%;margin: 10px 5px;background-color: #FF5252;">Cancel</button> 
        <button md-raised-button class="md-raised color-white" [disabled]="!groupForm.form.valid" (click)="accessGroup(group)" style="width: 45%;margin: 10px 5px;background-color:#58B6A2;">Save</button> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

これと同じで、他のボタンで正常に動作している私のコードです。私はここで間違っていますか？

Answer 1

invalidプロパティを使用してみてくださいを設定しないようにフォームを引き起こす可能性がありますnovalidateがあります。これを次のように変更します。

<button md-raised-button class="md-raised color-white" 
     (click)="accessGroup(group)" 
     [disabled]="groupForm.invalid">Save</button> 

Plunker Demoにリンクしてください。

Answer 2

フォームは検証をスキップして、有効な変数