ngmodelを使って、角度2の動的に作成されたチェックボックスの双方向データバインディングを設定する方法

Question

ngmodelを使用して動的に作成されたチェックボックスに双方向データバインディングを使用することに問題があります。フォームタグを使用せずに実現できます。フォームの検証を使用せずに選択したチェックボックスが1つもない場合は、警告メッセージを設定します。

Answer 1

私はこのようにして、チェックボックスでバインドする必要があるオブジェクトのリストを取得します。私はオブジェクトのリストを持つチェックボックスを生成するためにngforを使用しています。チェックするために、チェックされたチェックボックスIDがメインデータオブジェクトリストに存在するかどうかをチェックします。追加やmaindatasourceリストから削除する場合

私はtsはあなたが任意のidがthis.mainDataSourceかどうかをリストに追加し使用することができ、検証のため

AddRemoveDataSource(eventChk: any) { 
     if (eventChk.target.checked) { 
      let found = this.mainDataSource.sourceID.find(item => item === eventChk.target.value); 
      if (!found) 
       this.mainDataSource.sourceID.push(dataSoruce.target.value); 
     } 
     else 
      this.mainDataSource.sourceID = this.mainDataSource.sourceID.filter(item => item !== eventChk.target.value); 
    } 

ファイルイベント

<div class="form-check"> 
    <label class="form-check-label"> 
     <div class="col-sm-3" style="float:left; display:block;" *ngFor="let source of lstSource"> 
       <input type="checkbox" name="source.dataSourceName" 
        value="{{source.Id}}" 
        class="form-check-input" 
        [checked]="BoundObjectlstId.includes(source.Id) " 
        (change)="AddRemoveDataSource($event)" /> 
        {{source.dataSourceName}} 
      </div> 
    </label> 
</div> 

を追加しました。