valor-software / ng2-select

Angular based replacement for select boxes
http://valor-software.github.io/ng2-select/
MIT License
676 stars 588 forks source link

If ngModel is used within a form tag, either the name attribute must be set or the form #911

Open halukkaramete opened 6 years ago

halukkaramete commented 6 years ago

got this on my html

<ng-select  name = "topicUI" 
                            [(ngModel)]="topicsChosen"   
                            [multiple]="true"
                            [items]="items"
                            [disabled]="disabled"
                            (data)="refreshValue($event)"
                            (selected)="selected($event)"
                            (removed)="removed($event)"
                            placeholder="No city selected"></ng-select>

but yet, I'm still getting this error:

ManageLearningPlanComponent.html:458 ERROR Error: 
If ngModel is used within a form tag, 
either the name attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
    at Function.webpackJsonp.../../../forms/@angular/forms.es5.js.TemplateDrivenErrors.missingNameException (forms.es5.js:4040)

What am I doing wrong here? ( The only thing I did not do in the instructions is to include ng2-select.css )

halukkaramete commented 6 years ago

I've figured what was wrong. I was missing the name attribute of the button too. name="myNameIsTrinity" did the trick.

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

Why don't you update your demo to throw in the names to avoid this?

MichalJakubeczy commented 5 years ago

Had the same issue, I put the name attribute to ng-select like this:

<ng-select name="anyName" ... ></ng-select>