Can't bind to 'ngValue' since it isn't a known property of 'input'

Question

I have imported FormsModule and ReactiveFormsModule in my app.module.ts file.

But i keep getting the error.

I want to use ngValue instead value because i want to bind the whole object

So i have

TS FILE

 sendEmailSuppliersList = [
    {
      guid:1,
      isChecked: true,
      name: 'supplier 1',
      contactName:'person 1',
      contactEmail:'email 1'
    },
    {
      guid:2,
      isChecked: false,
      name: 'supplier 2',
      contactName:'person 2',
      contactEmail:'email 2'
    },
]

HTML

 <tr class="supplierList" *ngFor="let supplier of sendEmailSuppliersList; let i = index">
    <td>
               <input type="checkbox"  class="checkbox"
                  [checked]="supplier.isChecked" (change)="onSendEmailSupplierCheck($event)"
                  [ngValue]="supplier"
                 />
    </td>
 </tr>

How can i use ngValue on my input type checkbox ?

If i use [value] then i don't get any error, but with [value] i can't bind my whole object...

Answer 1

ngValue is a property of the NgSelectOption directive, which is applied to <option> elements. That means it's only defined for <option> elements, not <input> :

https://angular.io/api/forms/NgSelectOption .

That being said, as some pointed out in the comments, it doesn't make much sense to bind a whole object to a checkbox control.

Answer 2

I imagine you only can check one checkbox at time. If this is true, you can has a variable

value:any

And don't use "bannana" notation of ngModel else [ngModel] (ngModelChange) in this way

    <tr class="supplierList" *ngFor="let supplier of sendEmailSuppliersList" >
        <td>
           <input type="checkbox"  class="checkbox"
                  <!--the checkbox is selected only if value<>null and value.guid is supplier.guid-->
                  [ngModel]="value && supplier.guid==value.guid" 
                  <!-when change, if checked, value is equal to supplier
                     if not checked value is equal null-->
                  (ngModelChange)="value=$event?supplier:null"
           >
        </td>
     </tr>

Another option is use "radio buttons", not check-box