why option select reactive form angular not working?

0
votes

I'm building reactive form with angular 5, I'm trying to add select with option from list, but the list not present in the html page. I saw some similar questions and tried the suggested answers but without succsses, what am i doing wrong?

ts:

firstQuestionnaire: FormGroup;
yearsCurrentHome: string [] = ['1','2','3','4','5+'];
default: string = '1';

 constructor(private formBuilder: FormBuilder) { 
    this.firstQuestionnaire=this.createFormGroup();
    this.firstQuestionnaire.controls['yearsInCurrentHome'].setValue(this.default, {onlySelf: true});
  }
createFormGroup() {
    return new FormGroup({
      yearsInCurrentHome: new FormControl(null)
 });
  }

HTML:

<div class="question">
      <label>YEARS: </label>
      <select formControlName="yearsInCurrentHome">
        <option *ngFor="let year of yearsCurrentHome" [ngValue]="year"> {{year}}
        </option>
      </select>
    </div>

thanks

2
angulartypescriptangular-reactive-forms

2 Answers

0
votes

There could be multiple issues with your implementation. You might want to do the following:

  1. Add ReactiveFormsModule to the imports array of your @NgModule if not already added.
  2. Specify the form tag with [formGroup] on it if not done already.
  3. Check for errors on the console.
  4. Try comparing your implementation with the implementation in this Sample StackBlitz ref.
0
votes

You need to include form tag in your html as below :

 <form [formGroup]="firstQuestionnaire">
        <select formControlName="yearsInCurrentHome">
            <option *ngFor="let year of yearsCurrentHome" [ngValue]="year"> {{year}}
            </option>
          </select>
    </form>