face issue while filling a dropdownbox with an array

Question

I have following array:

testArray=[1,2,3,4]

and the follwoinh HTML code:

      <div >
        <select>
        <option *ngFor="let obj of testArray"
               name="mission"
               formControlName="mission"
               (click)="onMissionClick(mission)"
                [value]="obj"
               >
          {{obj}}

        </option>
        </select>
    </div>

the output is a dropdown list with only the first tow value of the testArray which are : 1 , 2. Then I got the following error:

BasicInfoDPComponent.html:39 ERROR Error: No value accessor for form control with name: 'mission'
    at _throwError (forms.js:1591)
    at setUpControl (forms.js:1501)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4037)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:4542)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4492)
    at checkAndUpdateDirectiveInline (core.js:8941)
    at checkAndUpdateNodeInline (core.js:10209)
    at checkAndUpdateNode (core.js:10171)
    at debugCheckAndUpdateNode (core.js:10804)
    at debugCheckDirectivesFn (core.js:10764)

NOTE: as you may noticed I need to put the drop down in a form, Out of form works fine.

score 1 · Answer 1 · answered Jul 31 '18 at 15:59

1

Move the name and formControlName to the select element. It is the actual input:

<select  name="mission"
         formControlName="mission">
    ...
</select>

answered Jul 31 '18 at 15:59

SiliconSoul

799
4
6

You saved me! I am sitting here like 2 hours trying to solve this. Thanks you thank you thank youuu. – user3075338 Jul 31 '18 at 16:04

score 0 · Answer 2 · answered Jul 31 '18 at 15:59

You can use something like below.

<div >
    <select (change)="onMissionClick($event)">
    <option *ngFor="let obj of testArray"
            [value]="obj">
      {{obj}}
    </option>
    </select>
</div>

and in TS file access selected value through event.target.value.

Also check this link

score 0 · Answer 3 · answered Jul 31 '18 at 16:26

**In component Add** 
  mission =  [];


 ngOnInit() {
    this.mission =  [1,2,3];

    this.formProfile = this.fb.group({

      mission :  this.fb.array([]),
    });
  }

**In view add below code:**

 <select formControlName="mission">
          <option *ngFor="let data of mission"   

          > {{data}} </option>
      </select>

face issue while filling a dropdownbox with an array

3 Answers3