Dailycode.info

Short solution for short problems

Angular: Formbuilder and select showing default value in Chrome, not in IE

I had a problem with FormBuilder and IE. In Chrome everything worked fine, the select first was empty and required. If no value selected then it would give an error. But in IE the first value was shown in the select but not selected. Very confusing. 

To solve this I had to add a default option to the select with value null:

<select id="type" class="form-control" formControlName="Type" [class.is-invalid]="hasError('Type')">
<option [ngValue]="null">Please select value</option>
<option *ngFor="let o of ficheTypes" [ngValue]="o.name">{{o.name}}</option>
</select>

Now in the initialize form I added null as default value for the model that was binbed to the select. (Marked below)

 private initializeForm(): void {
this.formGroup = this.formBuilder.group({
'Id': FormBuilderHelper.getFormEntry('Id', true, false, this.fiche, 0),
'Type': FormBuilderHelper.getFormEntry('Type', true, false, this.fiche, null),
});


blog comments powered by Disqus