No value accessor for form control with unspecified name attribute Angular 2

Question

I'm using ng2-select Click here! lib but this error is show :

No value accessor for form control with unspecified name attribute

• using angular2
• in html file same as link in top
• in ts my component same as link in top
• in modules.ts add : import { SelectModule } from 'ng2-select'; and : imports :[ SelectModule , ]

Can anyone help me to fix this error plz ?

 <div style="width: 300px; margin-bottom: 20px;">
 <h3>Select a single city</h3>
 <ng-select [allowClear]="true"
          [items]="items"
          [disabled]="disabled"
          (data)="refreshValue($event)"
          (selected)="selected($event)"
          (removed)="removed($event)"
          (typed)="typed($event)"
          placeholder="No city selected">
</ng-select>
<p></p>
<pre>{{value.text}}</pre>
<div>
  <button type="button" class="btn btn-primary"
        [(ngModel)]="disabledV" btnCheckbox
        btnCheckboxTrue="1" btnCheckboxFalse="0">
  {{disabled === '1' ? 'Enable' : 'Disable'}}
   </button>
  </div>
</div>

in ts compmonent:

 import { Component, OnInit } from '@angular/core';
 import { SelectItem } from 'ng-select/ng2-select'
 @Component({
  selector: 'app-api-two',
  templateUrl: './api-two.component.html',
  styleUrls: ['./api-two.component.css'],
 })
  export class ApiTwoComponent implements OnInit {

  constructor() { }

 ngOnInit() {
 }
  public items:Array<string> = ['Amsterdam', 'Antwerp', 'Athens', 
   'Barcelona',
  'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
  'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin',
  'Düsseldorf', 'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg',
  'Hamburg', 'Hannover', 'Helsinki', 'Kraków', 'Leeds', 'Leipzig', 'Lisbon',
  'London', 'Madrid', 'Manchester', 'Marseille', 'Milan', 'Munich', 
   'Málaga',
  'Naples', 'Palermo', 'Paris', 'Poznań', 'Prague', 'Riga', 'Rome',
  'Rotterdam', 'Seville', 'Sheffield', 'Sofia', 'Stockholm', 'Stuttgart',
  'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 
  'Wrocław',
  'Zagreb', 'Zaragoza', 'Łódź'];

private value:any = {};
public valueName:string='';
private _disabledV:string = '0';
private disabled:boolean = false;

private get disabledV():string {
  return this._disabledV;
}

private set disabledV(value:string) {
  this._disabledV = value;
  this.disabled = this._disabledV === '1';
}

public selected(value:any):void {
  console.log('Selected value is: ', value);
}

public removed(value:any):void {
  console.log('Removed value is: ', value);
}

public typed(value:any):void {
  console.log('New search input: ', value);
}

public refreshValue(value:any):void {
  this.value = value;
}
}

Thanks You.

Solution

You should add the ngDefaultControl attribute to your input like this:

<div>
  <button type="button" class="btn btn-primary"
        [(ngModel)]="disabledV" btnCheckbox
        btnCheckboxTrue="1" btnCheckboxFalse="0" ngDefaultControl>
        {{disabled === '1' ? 'Enable' : 'Disable'}}
   </button>
 </div>

Comments

[Admin]

Please post your component code (HTML & TS)

[Emad joha]

Edit my post now @trichetriche

[Admin]

Your error doesn't seem to come from here. If you think it's library related, consider removing it and installing it again.

[Emad joha]

in link say add this but not tell where add // class Select @Component({ selector: 'ng-select', properties: [ 'allowClear', 'placeholder', 'items', 'multiple', 'showSearchInputInDropdown'] })

[Emad joha]

maybe error from that ?

[Admin]

It doesn't tell you to add it, it tells you what properties you can use on your ng-select selector.

[Emad joha]

i'm know from error from html binding the html file not undefined to property binding like [allowClear] or [items] <ng-select [allowClear]="true" [items]="items" [disabled]="disabled" (data)="refreshValue($event)" (selected)="selected($event)" (removed)="removed($event)" (typed)="typed($event)" placeholder="No city selected"> </ng-select>

[Emad joha]

how can me add this property to know htnl file like (click) event

[Admin]

Please explain what this does (with either a link or your own description)

[Aniket Avhad]

stackoverflow.com/questions/46465891/… find the description on this link